CODEWITHSUNDEEP
vue.jsdatepickervuetify.jsvee-validate
Stella Esparza
Stella Esparza

Reputation: 111

Datepicker in vuetify with validators

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:

enter image description here

and then:

enter image description here

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!

Upvotes: 2

Views: 4308

Answers (1)

logaretm
logaretm

Reputation: 1435

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.

Upvotes: 3

Related Questions