Integrate vee-validate with vue-datepicker

[perspolise]

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

[faizaaulia]

I think the one you should wrap with <Field> is the <VueDatePicker>, not the date input text. The dp text input just need the binding with the values from dp-input slot. Then you can bind the field to the VueDatePicker, set the modelValue with Field's value, and handle the @update:modelValue here i update the stackblitz

[Jasenkoo]

Indeed, check vee-validate section on validating custom components.