javascript - Vuelidate — Date validation (Compare dates, lower and higher than) - Stack Overflow

admin管理员组

文章数量:1290971

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 pare 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?

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 pare 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?

• javascript
• vue.js
• date
• vuelidate

Share Improve this question Follow asked May 28, 2021 at 10:10 Rainier laanRainier laan 1,13055 gold badges2727 silver badges6767 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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 parisons , but I tried to stick to your point of view.

Moment.js might be an overkill for this, since you can do basic date parison. 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.

本文标签： javascriptVuelidateDate validation (Compare dateslower and higher than)Stack Overflow