VueJS中VCalendar的VDatePicker无法在V-TextField显示日期

核心问题分析 #

文本框显示组件标签、日期无法同步，通常是未正确绑定响应式数据、插槽内未处理日期选中事件，或是未对日期进行格式转换导致的。

完整解决方案代码示例 #

以下是可直接运行的实现，包含数据绑定、事件监听和日期格式化：

<template>
  <v-text-field
    v-model="formattedDate"
    label="选择日期"
    readonly
    append-icon="mdi-calendar"
  >
    <template v-slot:append>
      <v-menu
        v-model="menuOpen"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            v-on="on"
          >
            <v-icon>mdi-calendar</v-icon>
          </v-btn>
        </template>
        <v-date-picker
          v-model="selectedDate"
          @input="handleDateSelect"
          no-title
          landscape
        ></v-date-picker>
      </v-menu>
    </template>
  </v-text-field>
</template>

<script>
export default {
  data() {
    return {
      menuOpen: false,
      selectedDate: null,
      formattedDate: ''
    }
  },
  methods: {
    handleDateSelect(date) {
      if (date) {
        // 将VDatePicker返回的ISO格式日期转换为可读格式
        const dateObj = new Date(date)
        this.formattedDate = dateObj.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit'
        })
        this.menuOpen = false
      }
    }
  }
}
</script>

关键修复点 #

• 双向数据分离：用selectedDate绑定VDatePicker的选中值，formattedDate绑定VTextField的显示值，避免直接绑定导致的格式冲突
• 监听input事件：通过@input="handleDateSelect"捕获VDatePicker的选中事件，手动同步并格式化日期到文本框
• 关闭菜单逻辑：选中日期后关闭日历菜单，提升用户体验
• 日期格式化：将VDatePicker默认返回的YYYY-MM-DD格式转换为用户友好的显示格式（如YYYY年MM月DD日或MM/DD/YYYY）

常见误区排查 #

• 不要直接将VDatePicker的v-model绑定到VTextField的v-model，两者的格式要求不同，会导致显示异常
• 确保插槽内的VMenu和VDatePicker结构正确，activator插槽的on和attrs要正确绑定，否则日历无法正常触发
• 如果使用的是v-calendar库的VDatePicker（而非Vuetify内置的），需注意其返回的日期格式可能不同，需调整格式化逻辑

内容的提问来源于stack exchange，提问作者Dionísio Pereira Júnior