Nuxt中Vuetify 3的v-date-picker(type='month')无法正常工作求助

环境版本 #

• vue: ^3.3.4
• vuetify: ^3.5.7
• vite-plugin-vuetify: ^2.0.1
• @mdi/font: ^7.4.47

问题描述 #

需要通过日期选择器选择并获取YYYY/MM格式的数据，但设置type="month"的v-date-picker仍显示完整日历视图（日选择模式），无法切换到仅选择年月的界面。

解决方案 #

1. 确保v-model初始值格式正确 #

Vuetify 3的v-date-picker在type="month"模式下，要求绑定的初始值为YYYY-MM格式的字符串（而非包含日的完整日期）。如果初始值是完整日期格式，组件会默认切换到日视图。

示例脚本代码：

import { ref } from 'vue'

// 初始值设为YYYY-MM格式
const datePickerModel = ref('2024-05')

2. 配置日期显示格式 #

添加format="YYYY/MM"属性，指定选择后显示的日期格式为YYYY/MM：

修改后的组件代码：

<v-locale-provider locale="ja">
  <v-date-picker
    v-model="datePickerModel"
    type="month"
    hide-header
    elevation="15"
    format="YYYY/MM"
  ></v-date-picker>
</v-locale-provider>

3. 确认Locale配置正确 #

确保项目中已正确导入并配置日语Locale，避免Locale设置导致的组件渲染异常：

在main.ts中配置：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import ja from 'vuetify/locale/ja'
import 'vuetify/styles'

const vuetify = createVuetify({
  locale: {
    locale: 'ja',
    messages: { ja }
  }
})

createApp(App).use(vuetify).mount('#app')

4. 排查样式冲突 #

检查项目中是否有自定义CSS覆盖了日期选择器的默认样式，导致年月选择界面无法正常显示。

验证效果 #

完成上述配置后，日期选择器会切换为年月选择模式，选择后datePickerModel的值会自动转换为YYYY/MM格式（如2024/05），符合需求。

内容的提问来源于stack exchange，提问作者Pan curry