Datepicker internationalisation

src/components/DatePicker.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { useI18n } from '../composables/useI18n'
+
+
+const { locale, setLocale, getTranslation ,t} = useI18n()
+
 
 interface Props {
   modelValue?: string | [string, string]
@@ -68,6 +73,10 @@ const formatDisplayDate = (dateStr: string) => {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
 }
 
+const getMonth = (key: string): string => {
+  return getTranslation(key)
+}
+
 // 显示值
 const displayValue = computed(() => {
   if (props.type === 'daterange') {
@@ -464,6 +473,7 @@ const yearList = computed(() => {
   return years
 })
 
+/*
 // 月份名称
 const monthNames = [
   '一月',
@@ -480,6 +490,7 @@ const monthNames = [
   '十二月',
 ]
 const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+*/
 
 // 生命周期
 onMounted(() => {
@@ -736,7 +747,7 @@ const panelStyle = computed(() => {
                 &lt;&lt;
               </button>
               <span class="el-month-picker__header-label" @click="showYearSelector($event)">
-                {{ currentYear }}年
+                {{ currentYear }}
               </span>
               <button type="button" class="el-picker-panel__icon-btn" @click="nextYear">
                 &gt;&gt;
@@ -744,7 +755,7 @@ const panelStyle = computed(() => {
             </div>
             <div class="el-month-picker__content">
               <div
-                v-for="(monthName, index) in monthNames"
+                v-for="(monthName, index) in t.monthNames"
                 :key="index"
                 class="el-month-picker__item"
                 :class="{ 'is-current': index === currentMonth }"
@@ -766,10 +777,10 @@ const panelStyle = computed(() => {
               </button>
               <span class="el-date-picker__header-label">
                 <span class="el-date-picker__header-year" @click="showYearSelector($event)">
-                  {{ currentYear }}年
+                  {{ currentYear }}
                 </span>
                 <span class="el-date-picker__header-month" @click="showMonthSelector($event)">
-                  {{ monthNames[currentMonth] }}
+                  {{ t.monthNames[currentMonth] }}
                 </span>
               </span>
               <button type="button" class="el-picker-panel__icon-btn" @click="nextMonth">
@@ -783,7 +794,7 @@ const panelStyle = computed(() => {
             <div class="el-date-picker__content">
               <!-- 星期标题 -->
               <div class="el-date-table__header">
-                <div v-for="day in weekDays" :key="day" class="el-date-table__header-cell">
+                <div v-for="day in t.weekDays" :key="day" class="el-date-table__header-cell">
                   {{ day }}
                 </div>
               </div>

src/composables/useI18n.ts

@@ -39,6 +39,23 @@ const messages = {
     // 月份格式
     monthFormat: (month: number) => `${month}月`,
 
+    // 月份名称
+    monthNames: [
+      '一月',
+      '二月',
+      '三月',
+      '四月',
+      '五月',
+      '六月',
+      '七月',
+      '八月',
+      '九月',
+      '十月',
+      '十一月',
+      '十二月',
+    ],
+    weekDays:['日', '一', '二', '三', '四', '五', '六'],
+
     // 其他
     milestone: '里程碑',
     targetDate: '目标日期',
@@ -191,6 +208,22 @@ const messages = {
     // 月份格式
     monthFormat: (month: number) => `M${String(month).padStart(2, '0')}`,
 
+    // Month name
+    monthNames: [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+    ],
+    weekDays:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     // 其他
     milestone: 'Milestone',
     targetDate: 'Target Date',