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>
Share:
10,037

Related videos on Youtube

Joe Berg
Author by

Joe Berg

Updated on May 27, 2022

Comments

  • Joe Berg
    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.
      Yom T. over 4 years
      Assuming you set an initial value on the date model, this required 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
      Joe Berg over 4 years
      I 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.
      Yom T. over 4 years
      How 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
      Joe Berg over 4 years
      Yes, 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
    noel about 2 years
    slight correction "v!!" should be "!!v" :rules="[v => !!v || 'Required']"