Блог

У меня есть два входа, где пользователь может выбрать две даты, эти две даты позволяют пользователю выбрать, является ли продукт новым в течение этих двух дат. Я хочу проверить эти два поля с помощью Vuelidate и хотел бы сравнить две даты и многое другое, чтобы сделать это. Но я, кажется, не могу заставить это работать.

Подтверждение, которого я пытаюсь достичь:

Поле New_from

• не может быть ниже, чем сегодня, и не может быть выше, чем поле New_to (потому что это изменит порядок полей)

New_to

• поле не может быть меньше значения new_from

Что я пытался:

 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 amp;amp; !$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 amp;amp; !$v.fields.newFrom.required">New from is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted amp;amp; !$v.fields.newFrom.minValue">New from  cannot be lower than today</p>
  <p class="error text-red-600 my-3" v-if="submitted amp;amp; !$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 amp;amp; !$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 amp;amp; !$v.fields.newTo.required">New to is required!</p>
  <p class="error text-red-600 my-3" v-if="submitted amp;amp; !$v.fields.newTo.minValue">New to cannot be lower than new_from!</p>
</div>
 

Как я мог заставить это работать? Может ли такой пакет Moment.js быть полезен в этом случае?

Вы можете проверить пользовательские валидаторы, так как это помогло мне в vuelidate.

Вы можете использовать предварительно определенную требуемую проверку от vuelidate с помощью

 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);
    },
  },
},
 

Возможно , есть лучшие способы определить вашу логику при сравнении дат, но я старался придерживаться вашей точки зрения.

Moment.js это может быть излишним, так как вы можете выполнить базовое сравнение дат. В противном случае вы также можете использовать мгновенный плагин moment-range. Тем не менее , я твердо верю, что для начала вы должны сделать это как можно проще.