Datepicker in vuetify with validators - vue.js

Question

I need to create a new component that only have a datepicker with his validators. This component is generic because I need to use in more components easily. I need that when you click into the datepicker and you don't pick any date show a red validation like this:
and then:
If you pick any date, this validation should disappear.
I had thinked in this form:
<ValidationObserver v-slot="{ handleSubmit, invalid }" ref="form">
<v-form #submit.prevent="handleSubmit(submit)">
<ValidationProvider ref="form" :name="nombre" :rules="rules" v-slot="{ errors }">
<v-menu v-model="dialogOpen" :close-on-content-click="false" :nudge-right="40" transition="scale-transition"
offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field :error-messages="errors" v-model="value" :label="label" prepend-icon="mdi-calendar" v-bind="attrs" v-on="on">
</v-text-field>
</template>
<v-date-picker required v-model="value" #input="dialogOpen = false" #change="changed"
#keydown="checkValidate"></v-date-picker>
</v-menu>
</ValidationProvider>
</v-form>
But this doesn't work. Someone can share me another example or solution for this thing?
Thanks!

Answer 1

The problem is that vee-validate (v3) uses v-model to find the input tags, and since vuetify uses v-model for various components to compose them together like the date-picker, vee-validate will validate the menu instead of the v-text-field.
There is a workaround, you need to wrap the Vuetify's picker snippet in a new component DatePicker.vue
<v-menu v-model="dialogOpen" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field :error-messages="errors" v-model="value" :label="label" prepend-icon="mdi-calendar" v-bind="attrs" v-on="on">
</v-text-field>
</template>
<v-date-picker required v-model="value" #input="dialogOpen = false" #change="changed" #keydown="checkValidate"></v-date-picker>
</v-menu>
Note that you still need to implement v-model support for this new component by emitting input event when value changes.
And then use the custom DatePicker with the ValidationProvider:
<ValidationProvider ref="form" :name="nombre" :rules="rules" v-slot="{ errors }">
<DatePicker v-model="value" />
</ValidationProvider>
Of course that was a shortsight on vee-validate's part, and the new v4 release for Vue 3 avoids this bad design.