title: How to create custom start/end date Vue custom validator
body: <p>I am trying to create a custom Vue validator. I have reviewed their docs <a href="https://vuelidate.netlify.com/#custom-validators" rel="nofollow noreferrer">https://vuelidate.netlify.com/#custom-validators</a>, as well as a very useful tutorial <a href="https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/" rel="nofollow noreferrer">https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/</a>.</p>
  
  <p>However, I still don't see a clear example of how to do the following:</p>
  
  <p>I have two datepicker input fields, a start and end date. I want to be able to create a validator which can </p>
  
  <ol>
  <li>Check both dates in tandum to make sure that the end date is not before the start date</li>
  <li>Have a single validation message based on this (aka: we don't want one field with 'Start date can't be before end date' and the other with 'End date can't be before start date')</li>
  </ol>
  
  <p>This type of functionality (or using other fields values inside a different one) is basically what the core <code>sameAs</code> validator (see below) has:</p>
  
  <pre class="lang-js prettyprint-override"><code>    import { ref, withParams } from './common'
      export default (equalTo) =&gt;
      withParams({ type: 'sameAs', eq: equalTo }, function(value, parentVm) {
        return value === ref(equalTo, this, parentVm)
      })
  </code></pre>
  
  <p>I have tried to mimic this, but its not working...</p>
  
  <pre class="lang-js prettyprint-override"><code>    import { ref, withParams } from 'vuelidate/lib/validators/common.js'
      export default (endDate) =&gt;
      withParams({ type: 'dateRange', eq: endDate }, function(value, parentVm) {
          console.log('parentVm', parentVm);
          return value &lt; ref(endDate, this, parentVm)
      })
  </code></pre>
  
  <p>Its not even logging my console.log. Here is the code calling it</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;date-picker id="financial-start-date" v-model="$v.start_date.$model" :config="datepickerConfig"&gt;&lt;/date-picker&gt;
      &lt;date-picker id="financial-end-date" v-model="$v.end_date.$model" :config="datepickerConfig"&gt;&lt;/date-picker&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/oIHrN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oIHrN.png" alt="enter image description here"></a></p>
  
  <p>Validations:</p>
  
  <pre class="lang-js prettyprint-override"><code>    validations: {
              transaction_id: {
  
              },
              start_date: {
  
              },
              end_date: {
                  dateRange: dateRange('startDate')
              }
          },
  </code></pre>