Vue2-datepicker: Datepicker is not working with vee-validate

[BuiHuyCuong]

Can you check for me datepicker when input empty, itsn't working with vee-validate?
How can I do to fix this?

[mengxiong10]

I have not used it.
But I think you can do it like this.

Verify with an input box that has the same value as the date component but is invisible.

<date-picker v-model="value" />
<input v-model = "value" v-show="false" v-validate="'required'" />

[BuiHuyCuong]

Thanks for responding, but when I clear input(not use button editable) then value in input datepicker not change. have any option for me check it?

[mengxiong10]

clear input ?
You just need to keep the two element value same(v-model the same data).
Let the hidden input element to validate.

[mengxiong10]

when clear the input the date value not changed.
I fixed it in v2.6.4

[neloydas]

If it helps anyone, I solved the issue in a different way. The main issue is if you clear out date-picker component using the clear[X] button it fills the model with [null, null]. And vee-validate treats the null value as a valid value. I also needed more custom validation so I decided to create a custom rule.

import { extend } from 'vee-validate';

extend('daterangecheck', {
    validate: (value) => {
        var startDate = value[0];
        var endDate = value[1];
        return (startDate instanceof Date) && (endDate instanceof Date);
    },
    message: '{_field_} should contain at least 2 valid datetimes.'
});

and use validation-provider like this:

<ValidationProvider name="Datetime range" :rules="{required: true, daterangecheck: true}">
The required rule is still needed for some reason because otherwise the rule is not executed on page load. and if you have a <ValidationObserver v-slot="{ invalid }">
with
<b-button tag="input" type="is-dark" value="Submit" :disabled="invalid"

It does not prevent the button to show before the datetime field is touched for the first time.