Integrate vee-validate with vue-datepicker

Question

I'm trying to validate vue-datepicker for required field using vee-validate like this:

  <Form @submit="handleEvent" :validation-schema="addEventSchema">
    <VueDatePicker
      v-model="eventDate.startDate"
      text-input
      hide-input-icon
      :enable-time-picker="false"
      :clearable="false"
      model-type="yyyy-MM-dd"
      format="yyyy-MM-dd"
    >
      <template #dp-input="{ value }">
        <Field name="startDate" type="text" v-slot="{ field, errors }">
          <input
            type="text"
            name="startDate"
            v-bind="field"
            class="form-control form-control-lg form-control-outlined"
            :class="{ 'is-invalid': !!errors.length }"
            placeholder="End Time"
            :value="value"
            autocomplete="off"
          />
        </Field>
        <label class="form-label-outlined" for="outlined-date-picker">
          Start Date
        </label>
        <ErrorMessage class="invalid-feedback" name="startDate" />
      </template>
    </VueDatePicker>
    <button type="submit">Submit</button>
  </Form>

In action, after click on submit button vee-validate worked truly and show error message, But when I add date to the field and field is filled, validation not fix the error, still shown the error and I can't submit form.

Demo is here

How do can I integrate vee-validate with vue-datepicker?!

Answer 1

Your code has a reactivity issue with passing the parent component state into the slot. The customization documentation shows it properly.

Solution:

<template #dp-input="{ value }">
  <Field name="date" type="text" :modelValue="value" v-slot="{ field, errors }">
    <input
      type="text"
      name="startDate"
      v-bind="field"
      class="form-control form-control-lg form-control-outlined"
      :class="{ 'is-invalid': !!errors.length }"
      placeholder="Start Date"
      :modelValue="field"
      autocomplete="off"
    />
  </Field>
  <ErrorMessage class="invalid-feedback" name="date" />
</template>

First, the <Field name="date" listens to the <VueDatePicker model state. But you did not update the Field's model, <Field name="date" :modelValue="value" will fix the first reactivity issue.

Second, the inner input does not bind properly to the model. <input :value="value" should be revised to <input :modelValue="field". The field is the actual state of <Field name="data" component which should be used in its slots, however, you bonded that to the VueDatePicker state.

The demo is updated as well.