✨(date-picker): i18n support

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.7.0-dev.19",
+  "version": "1.7.0-dev.20",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -36,13 +36,13 @@
     "@layui/icons-vue": "^1.0.9",
     "@layui/layer-vue": "^1.4.6",
     "@vueuse/core": "^9.2.0",
+    "@umijs/ssr-darkreader": "^4.9.45",
+    "@ctrl/tinycolor": "^3.4.1",
     "async-validator": "^4.1.1",
     "cropperjs": "^1.5.12",
-    "@umijs/ssr-darkreader": "^4.9.45",
     "dayjs": "^1.11.0",
     "evtd": "^0.2.3",
-    "vue-i18n": "^9.1.10",
+    "vue-i18n": "^9.1.10"
-    "@ctrl/tinycolor": "^3.4.1"
   },
   "files": [
     "lib",

package/component/src/component/datePicker/components/DatePanel.vue

@@ -17,8 +17,7 @@
             >{{ datePicker.currentYear.value }} {{ t("datePicker.year") }}</span
           >
           <span @click="datePicker.showPanel.value = 'month'"
-            >{{ datePicker.currentMonth.value + 1 }}
+            > {{ MONTH_NAME[datePicker.currentMonth.value] }} </span
-            {{ t("datePicker.month") }}</span
           >
         </div>
         <i
@@ -55,7 +54,7 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { inject, ref, watch } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { provideType } from "../interface";
 import { setDateList } from "../day";
 import PanelFoot from "./PanelFoot.vue";
@@ -74,6 +73,21 @@ const Day = ref(props.modelValue);
 const datePicker: provideType = inject("datePicker") as provideType;
 const dateList = ref<any>([]);
 
+const MONTH_NAME = computed(() => [
+  t('datePicker.january'),
+  t('datePicker.february'),
+  t('datePicker.march'),
+  t('datePicker.april'),
+  t('datePicker.may'),
+  t('datePicker.june'),
+  t('datePicker.july'),
+  t('datePicker.august'),
+  t('datePicker.september'),
+  t('datePicker.october'),
+  t('datePicker.november'),
+  t('datePicker.december'),
+]);
+
 // 监听年月, 刷新日期
 watch(
   [datePicker.currentYear, datePicker.currentMonth],

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -5,7 +5,7 @@
         <div class="laydate-set-ym">
           <span @click="datePicker.showPanel.value = 'month'">{{
             typeof Month !== "string"
-              ? Month + 1 + t("datePicker.month")
+              ? MONTH_NAME[Month]
               : t("datePicker.selectMonth")
           }}</span>
         </div>
@@ -41,7 +41,7 @@ export default {
 <script lang="ts" setup>
 import dayjs from "dayjs";
 import { useI18n } from "../../../language";
-import { inject, ref, watch } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
 
@@ -57,32 +57,33 @@ const datePicker: provideType = inject("datePicker") as provideType;
 const Month = ref(props.modelValue);
 const { t } = useI18n();
 
-const MONTH_NAME = [
+const MONTH_NAME = computed(() => [
-  "1月",
+  t('datePicker.january'),
-  "2月",
+  t('datePicker.february'),
-  "3月",
+  t('datePicker.march'),
-  "4月",
+  t('datePicker.april'),
-  "5月",
+  t('datePicker.may'),
-  "6月",
+  t('datePicker.june'),
-  "7月",
+  t('datePicker.july'),
-  "8月",
+  t('datePicker.august'),
-  "9月",
+  t('datePicker.september'),
-  "10月",
+  t('datePicker.october'),
-  "11月",
+  t('datePicker.november'),
-  "12月",
+  t('datePicker.december'),
-];
+]);
+
 
 // 点击月份
 const handleMonthClick = (item: any) => {
-  Month.value = MONTH_NAME.indexOf(item);
+  Month.value = MONTH_NAME.value.indexOf(item);
   if (!datePicker.range) {
     if (datePicker.type === "yearmonth") {
       datePicker.currentDay.value = dayjs(datePicker.currentDay.value)
-        .month(MONTH_NAME.indexOf(item))
+        .month(MONTH_NAME.value.indexOf(item))
         .valueOf();
     }
     if (datePicker.type === "date" || datePicker.type === "datetime") {
-      emits("update:modelValue", MONTH_NAME.indexOf(item));
+      emits("update:modelValue", MONTH_NAME.value.indexOf(item));
       datePicker.showPanel.value = datePicker.type;
     }
   }

package/component/src/component/datePicker/components/components/DateContent.vue

@@ -45,7 +45,8 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import { computed, inject, ref, Ref } from "vue";
+import { useI18n } from "../../../../language";
+import { computed, inject } from "vue";
 import { provideType } from "../../interface";
 
 export interface DateContentProps {
@@ -63,8 +64,21 @@ const props = withDefaults(defineProps<DateContentProps>(), {
   startDate: -1,
   endDate: -1,
 });
-const WEEK_NAME = ["日", "一", "二", "三", "四", "五", "六"];
+
+const { t } = useI18n();
+
+const WEEK_NAME = computed(() => [
+  t('datePicker.sunday'),
+  t('datePicker.monday'),
+  t('datePicker.tuesday'),
+  t('datePicker.wednesday'),
+  t('datePicker.thursday'),
+  t('datePicker.friday'),
+  t('datePicker.saturday') 
+]);
+
 const datePicker: provideType = inject("datePicker") as provideType;
+
 const emits = defineEmits([
   "update:modelValue",
   "update:startDate",

package/component/src/language/locales/en_US.ts

@@ -9,10 +9,10 @@ export default {
     confirm: "confirm",
     page: "page",
     item: "item",
-    total: "Total",
+    total: "total",
   },
   datePicker: {
-    year: "year",
+    year: "",
     month: "month",
     sunday: "SU",
     monday: "MO",
@@ -21,6 +21,18 @@ export default {
     thursday: "TH",
     friday: "FR",
     saturday: "SA",
+    january: "January",
+    february: "February",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December",
     selectDate: "select date",
     selectTime: "select time",
     selectYear: "select year",

package/component/src/language/locales/zh_CN.ts

@@ -21,6 +21,18 @@ export default {
     thursday: "四",
     friday: "五",
     saturday: "六",
+    january: "1月",
+    february: "2月",
+    march: "3月",
+    april: "4月",
+    may: "5月",
+    june: "6月",
+    july: "7月",
+    august: "8月",
+    september: "9月",
+    october: "10月",
+    november: "11月",
+    december: "12月",
     selectDate: "选择日期",
     selectTime: "选择时间",
     selectYear: "选择年份",

package/document-component/src/document/zh-CN/guide/introduce.md

@@ -24,7 +24,7 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
 :::
 
 <lay-timeline>
-  <lay-timeline-item title="2022年，layui-vue 里程碑版本 1.0.0 发布" simple></lay-timeline-item>
+  <lay-timeline-item title="2021年，layui-vue 里程碑版本 1.0.0 发布" simple></lay-timeline-item>
   <lay-timeline-item title="2017年，layui 里程碑版本 2.0 发布" simple></lay-timeline-item>
   <lay-timeline-item title="2016年，layui 首个版本发布" simple></lay-timeline-item>
   <lay-timeline-item title="2015年，layui 孵化" simple></lay-timeline-item>