Как создать пользовательскую дату начала / окончания Vue custom validator - PullRequest
0 голосов
/ 30 октября 2019

Я пытаюсь создать собственный валидатор Vue. Я просмотрел их документы https://vuelidate.netlify.com/#custom-validators,, а также очень полезный учебник https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/.

Однако я до сих пор не вижу четкого примера того, как сделать следующее:

У меня есть два поля ввода DatePicker, даты начала и окончания. Я хочу иметь возможность создать валидатор, который может

  1. Проверить обе даты в тандуме, чтобы убедиться, что дата окончания не раньше даты начала
  2. Иметь одно сообщение проверки на основедля этого (иначе: мы не хотим, чтобы одно поле с «Дата начала не могло быть раньше даты окончания», а другое с «Дата окончания не может быть раньше даты»)

ThisТип функциональности (или использование других значений полей внутри другого) - это то, что имеет основной валидатор sameAs (см. ниже):

    import { ref, withParams } from './common'
    export default (equalTo) =>
    withParams({ type: 'sameAs', eq: equalTo }, function(value, parentVm) {
      return value === ref(equalTo, this, parentVm)
    })

Я пытался имитировать это, но это не работает. ..

    import { ref, withParams } from 'vuelidate/lib/validators/common.js'
    export default (endDate) =>
    withParams({ type: 'dateRange', eq: endDate }, function(value, parentVm) {
        console.log('parentVm', parentVm);
        return value < ref(endDate, this, parentVm)
    })

Это даже не регистрирует мой console.log. Вот код, называющий его

    <date-picker id="financial-start-date" v-model="$v.start_date.$model" :config="datepickerConfig"></date-picker>
    <date-picker id="financial-end-date" v-model="$v.end_date.$model" :config="datepickerConfig"></date-picker>

enter image description here

Проверки:

    validations: {
            transaction_id: {

            },
            start_date: {

            },
            end_date: {
                dateRange: dateRange('startDate')
            }
        },
...