时间戳

首页 > 解决方案 > Vuetify：如何修复 v-date-picker 未在文本字段中显示所选日期

date - Vuetify：如何修复 v-date-picker 未在文本字段中显示所选日期

问题描述

我正在使用 vue.js / vuetify 2 创建一个表单，其中一个字段是日期事件，所以我使用 v-date-picker 让用户选择日期。问题如下：

我尝试将 vuetify 从版本 1.5 更新到最新版本 2，问题仍然存在。我正在使用 date-fns 来格式化日期，所以我尝试将 v-text-field = "formattedDate" 的值更改为 v-text-field = "date"

热重新加载后（不是刷新，F5，页面自身热加载），日期出现在表单中，但仍然无法在菜单中更改日期（单击其他日期没有任何作用）。

<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>

我希望有一个功能性的 v-date-picker，一个可以与之交互的菜单（单击/选择日期），然后更新文本字段并显示更新的日期。

实际结果是菜单打开但无法选择日期，并且在文本字段中看不到更新。

标签： datevue.jsvuetify.jsdate-fns

解决方案

尝试这个：

<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>

它是从我的代码中提取的，正如我们所说的那样。

工作示例：Codepen

推荐阅读