4

I have two inputs where the user can select two dates, These two dates allow the user to select if a product is new during those two dates. I want to validate these two fields using Vuelidate and would like to compare the two dates and more to do so. But I can't seem to make it work.

The validation I am trying to achieve:

New_from field

  • cannot be lower than today and cannot be higher than the New_to field (Because that will reverse the order of the fields)

New_to

  • field cannot be lower than the value of new_from

What I tried:

validations: {
            fields: {
                newFrom: {
                    required: requiredIf(function() {
                        return this.fields.newTo
                    }),
                    minValue: minValue(new Date()), // Make the minimal value today
                    maxValue: this.newTo ? this.newTo : null 
                },
                newTo: {
                    required: requiredIf(function() {
                        return this.fields.newFrom
                    }),
                    minValue: this.fields.newFrom, // But this does not work
                },

            },

        }

HTML

<div class="w-full flex-column">
  <input v-model.trim="$v.fields.newFrom.$model" type="date" name="new_from" id="new_from" v-on:change="alert('test')" :class="{'border-red-600': submitted && !$v.fields.newFrom.required}" class="appearance-none block border border-gray-200 p-2 rounded-md w-full shadow-sm focus:border-indigo-500 focus:outline-none" placeholder="">
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.required">New from is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.minValue">New from  cannot be lower than today</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newFrom.maxValue">New from  cannot be higher than new_to</p>
</div>
<div class="mx-3 flex items-center justify-center">
  <p class="text-gray-900 font-medium">To</p>
</div>
<div class="w-full flex-column">
  <input v-model.trim="$v.fields.newTo.$model" type="date" name="new_to" id="new_to"  :class="{'border-red-600': submitted && !$v.fields.newTo.required}" class="appearance-none block border border-gray-200 p-2 rounded-md w-full shadow-sm focus:border-indigo-500 focus:outline-none" placeholder="">
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newTo.required">New to is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted && !$v.fields.newTo.minValue">New to cannot be lower than new_from!</p>
</div>

How could I make this work? Could a package such as Moment.js be useful in this case?

Rainier laan
  • 1,101
  • 5
  • 26
  • 63

1 Answers1

8

You can check custom validators as it helped me about vuelidate.

You can use pre-defined required validation from vuelidate using

import { required } from "vuelidate/lib/validators";
...
validations: {
fields: {
  newFrom: {
    required,
    minValue(val) {
      return new Date(val) > new Date();
    },
    maxValue(val, {newTo}){
      return new Date(newTo) > new Date(val);
    }
  },
  newTo: {
    required,
    minValue(val, { newFrom }) {
      return new Date(val) > new Date(newFrom);
    },
  },
},

There might be better ways to define your logic on date comparisons , but I tried to stick to your point of view.

Moment.js might be an overkill for this, since you can do basic date comparison. Otherwise there is a moment plugin moment-range you can also use. However , I strongly believe that you have to keep it simple as much as you can for starters.

Ugur Eryuzlu
  • 111
  • 4