Answer a 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.

Answers

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