如何将Vuetify中v-date-picker翻译内容的首字母大写？

核心思路 #

通过自定义Vuetify日期选择器的国际化配置，将翻译后的月份、星期文本传入你的首字母大写函数处理后再赋值，替代默认的locale文本输出。

针对Vuetify 2的实现（依赖date-fns） #

1. 自定义Locale对象 #

引入对应语言的locale包，对其中的日期文本做首字母大写处理：

// 引入date-fns的locale包和你的大写函数
import { zhCN, enUS } from 'date-fns/locale'
import { capitalizeFirstLetter } from '@/utils/your-capitalize-utils'

// 封装处理后的多语言配置
const customDateLocales = {
  'zh-CN': {
    ...zhCN,
    formatLong: {
      ...zhCN.formatLong,
      // 处理月份名称
      month: (options) => capitalizeFirstLetter(zhCN.formatLong.month(options)),
      // 处理星期名称
      weekday: (options) => capitalizeFirstLetter(zhCN.formatLong.weekday(options))
    }
  },
  'en-US': {
    ...enUS,
    formatLong: {
      ...enUS.formatLong,
      month: (options) => capitalizeFirstLetter(enUS.formatLong.month(options)),
      weekday: (options) => capitalizeFirstLetter(enUS.formatLong.weekday(options))
    }
  }
}

2. 组件中使用自定义Locale #

替换原来的字符串locale，返回处理后的locale对象：

<template>
  <v-date-picker 
    :locale="customTranslateDate"
    v-model="date"
    :max="new Date().toISOString().substr(0, 10)"
    @input="getDate"  
  />
</template>

<script>
export default {
  data() {
    return { date: null }
  },
  methods: {
    getDate() {
      // 你的日期处理逻辑
    },
    customTranslateDate() {
      const lang = this.$cookies.get('language') || 'zh-CN'
      this.$i18n.locale = lang
      // 返回自定义处理后的locale，兜底默认语言
      return customDateLocales[lang] || customDateLocales['zh-CN']
    }
  }
}
</script>

针对Vuetify 3的实现（依赖@formatjs/intl） #

1. 在Vuetify全局配置中自定义日期Locale #

直接重写月份、星期的显示文本，并用大写函数处理：

import { createVuetify } from 'vuetify'
import { VuetifyDateAdapter } from 'vuetify/locale/adapters/date-fns'
import { capitalizeFirstLetter } from '@/utils/your-capitalize-utils'

const vuetify = createVuetify({
  date: {
    adapter: VuetifyDateAdapter,
    locale: {
      'zh-CN': {
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'].map(capitalizeFirstLetter),
        monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'].map(capitalizeFirstLetter),
        weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'].map(capitalizeFirstLetter),
        weekdaysShort: ['日', '一', '二', '三', '四', '五', '六'].map(capitalizeFirstLetter)
      },
      'en-US': {
        months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].map(capitalizeFirstLetter),
        monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map(capitalizeFirstLetter),
        weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].map(capitalizeFirstLetter),
        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(capitalizeFirstLetter)
      }
    }
  }
})

2. 组件中直接绑定语言字符串 #

Vuetify会自动读取全局配置的自定义locale：

<template>
  <v-date-picker 
    :locale="translateDate"
    v-model="date"
    :max="new Date().toISOString().substr(0, 10)"
    @input="getDate"  
  />
</template>

<script setup>
import { ref } from 'vue'
import { useCookies } from 'vue3-cookies'
import { useI18n } from 'vue-i18n'

const { cookies } = useCookies()
const { locale } = useI18n()
const date = ref(null)

const translateDate = () => {
  const lang = cookies.get('language') || 'zh-CN'
  locale.value = lang
  return lang
}

const getDate = () => {
  // 你的日期处理逻辑
}
</script>

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