如何修改Vuetify中v-date-picker的头部日期显示格式

Vuetify 3 解决方案 #

直接使用组件的title-format属性，传入目标格式字符串即可：

<v-date-picker title-format="yyyy MMMM"></v-date-picker>

yyyy代表4位年份，MMMM代表完整月份名称，配置后头部会直接显示2022 August格式的日期。

Vuetify 2 解决方案 #

Vuetify 2没有直接配置头部格式的属性，需要通过自定义header-text插槽替换默认内容：

<v-date-picker>
  <template v-slot:header-text="{ date }">
    {{ new Date(date).getFullYear() }} {{ new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date) }}
  </template>
</v-date-picker>

通过插槽获取当前月份的日期对象，手动拼接年份与完整月份名称，实现目标格式。

补充说明 #

如果需要适配多语言，可调整Intl.DateTimeFormat的语言标识，比如切换为中文时将'en-US'改为'zh-CN'，月份名称会自动适配对应语言。

内容的提问来源于stack exchange，提问作者Vũ Thao