Vuetify make date picker required and do not allow text input
10,037
Just add the rules to v-text-field
<v-menu v-model="datemenu">
<template v-slot:activator="{on}">
<v-text-field
v-model="date"
v-on="on"
label="Something"
:rules="[v => !!v || 'Required']"
></v-text-field>
</template>
<v-date-picker v-model="date" @input></v-date-picker>
</v-menu>
Related videos on Youtube
Author by
Joe Berg
Updated on May 27, 2022Comments
-
Joe Berg over 1 year
I'm using vuetify to do a date picker for a user's birthday. I want the date picker to be required in my form and to accept date values only. Here is what I have tried:
<v-flex xs12> <v-menu ref="menu" v-model="menu" :rules="requiredRules" :close-on-content-click="false" transition="scale-transition" offset-y full-width min-width="290px" > <template v-slot:activator="{ on }"> <v-text-field :rules="requiredRules" v-model="date" label="Birthday date" append-icon="event" outlined readonly v-on="on" ></v-text-field> </template> <v-date-picker ref="picker" v-model="date" :max="new Date().toISOString().substr(0, 10)" min="1950-01-01" @change="save" ></v-date-picker> </v-menu> </v-flex>
export default { data() { return { requiredRules: [v => !!v || "This field is required"], } } }
With this code I can't type text into the date field box, but it doesn't appear to be required.
If I remove
readonly
then it becomes required but I am able to type text into the date field box although my required rules are still applied.How can I make the date field box both required and not accepting of text?
Thanks in advance.
-
Yom T. over 4 yearsAssuming you set an initial value on the
date
model, thisrequired
rule is probably not needed anymore since the only component responsible for updating the value is the datepicker (unless it can be set elsewhere, somehow). -
Joe Berg over 4 yearsI did not set an initial value on the date model. It is a birthday input, so I do not want a user accidentally forgetting to update it.
-
Yom T. over 4 yearsHow are you validating the input elements? Do you nest them in a
v-form
? If it's initially empty, the validation should work when you focus out of the text field. -
Joe Berg over 4 yearsYes, I nest them in a v-form. Other input elements inside the form adhere to the required rules when I focus out of the text field. It's only the date picker text field that's wrapped in a v-menu that doesn't cooperate
-
-
noel about 2 yearsslight correction "v!!" should be "!!v" :rules="[v => !!v || 'Required']"