Vuetify: How to fix v-date-picker not showing the chosen date in the text-field

Question

I'm creating a form with vue.js / vuetify 2, one of the field is Date Event, so I used v-date-picker for the user to choose the date. The problems are the following:

• Date Picker menu opens, but cannot pick date. If any dates were clicked, it won't update the menu. The months and years can be changed (UI), but still doesn't update.

• With the above problem, the text-field remains empty.

I tried updating vuetify from version 1.5 to the latest version 2, and the problem still persists. I am using date-fns to format the date, so I tried to change the value of v-text-field = "formattedDate" into v-text-field = "date"

After a hot reload (not a refresh, F5, the page hotloaded itself), the date appeared in the form, but still date cannot be changed in the menu (clicking other dates does nothing).

<template>
<v-app>
  <v-content>
    <v-layout wrap row mt-2 align-center justify-center>
    <v-card width="1050px" height= "690px">
      <v-card-title class="display-1 font-weight-medium ">Post-Event Form:</v-card-title>
  <v-form>
    <v-container>
      <v-layout row wrap>
          <v-flex md4>
          <v-text-field v-model="event" prepend-icon="event" label="Event Name" required></v-text-field>
        </v-flex>
      <v-flex md3>
          <v-menu>
            <v-text-field :value="formattedDate" slot="activator" label="Date of event" prepend-icon="date_range"></v-text-field>
            <v-date-picker v-model="date"></v-date-picker>
        </v-menu>

        </v-container>
       </v-flex>
     </v-form>
   </v-content>

</v-app>
</template>

<script>
import format from 'date-fns/format'

export default{
  data() {
    return {
      evenum: int,
      event: '',
      // date: '',
      date: new Date().toISOString().substr(0, 10),
      menu1: true,
      menu2: true,
  }
},
computed: {
    formattedDate() {
     return this.date ? format(this.date, 'do MMM YYYY') : ''
    },
},
}

</script>

I expect to have a functional v-date-picker, a menu that can be interacted with (click / choose date) which then updates the text-field and show the updated date.

Actual results were that of the menu opens yet cannot pick the date, and no update is seen in the text-field.

Answer 1

This is how I fixed the date picker for my project.

<template>
  <v-flex>
       <v-menu
           ref="menu2"
           v-model="menu2"
           :close-on-content-click="false"
           :return-value.sync="date"
           transition="scale-transition"
           offset-y
           min-width="auto">
              <template v-slot:activator="{ on, attrs }">
                <v-text-field
                  v-model="selectDate"
                  placeholder="DD/MM/YYYY"
                  readonly
                  v-bind="attrs"
                  v-on="on">
                  <template v-slot:prepend-inner>
                    <v-icon> mdi-calendar </v-icon>
                  </template>
                </v-text-field> 
            </template>
          <v-date-picker
            v-model="selectDate"
            scrollable
            <v-spacer></v-spacer>
            <v-btn text color="primary" @click="menu2 = false">
                Cancel
            </v-btn>
             <v-btn text
                  @click="$refs.menu2.save(selectDate)">
                  OK
             </v-btn>
            </v-date-picker>
        </v-menu>
    </v-flex>
 </template>
 <script>
export default {
  data() {
    return {
      selectDate: "",
      menu1: false,
    };
  },
};
</script>

Answer 2

Try this : you can use v-model instead :value

<div id="app">
   <v-app id="inspire">
      <v-container>
         <v-row>
            <v-col cols=12 md="4">
               <v-menu
                  v-model="showPicker"
                  :close-on-content-click="false"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  min-width="290px"
                  max-width="290px"
                  >
                  <template v-slot:activator="{ on }">
                     <v-text-field
                        v-model="selectedDate"
                        label="date"
                        prepend-icon="mdi-calendar-range"
                        readonly
                        v-on="on"
                     ></v-text-field>
                 </template>
                 <v-date-picker v-model="date" @input="closeDateMenu"></v- date-picker>
              </v-menu>
           </v-col>
        </v-row>
     </v-container>
   </v-app>
</div>

new Vue({
   el: '#app',
   vuetify: new Vuetify(),
   data: () => ({
     showPicker: false,
     selectedDate: null,
     date:null,
   }),
   methods:{
    closeDateMenu (){
      this.showPicker = false;
      this.selectedDate= this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : '';
    },
  }
})

Working example : Codepen

Answer 3

Try this:

<template>
<v-menu
    v-model="showPicker"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    full-width
    max-width="290px"
    min-width="290px"
>
    <template v-slot:activator="{ on }">
        <v-text-field
            v-model="selectedDate"
            label="Choose the date"
            hint="YYYY/MM/DD"
            persistent-hint
            readonly
            v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
        v-model="selectedDate"
        no-title
        @input="showPicker = false"
    ></v-date-picker>
</v-menu>
</template>

<script>
export default {
    data: () => ({
        showPicker: false,
        selectedDate: null,
    })
</script>

It is extracted from my code that is working as we speak.

Working example: Codepen