feat(date-time-picker): date-time-picker 组件支持国际化 (#2464)

* feat(datetimepicker): date-picker DateTimePicker 组件支持国际化 re #2367 * fix(date-time-picker): 修复代码冗余问题 * Update README.md * Update README.md --------- Co-authored-by: Y <[email protected]>
Tencent · Dec 4, 2023 · 8533590 · 8533590
1 parent 1e379a0
commit 8533590
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 6 deletions.
diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md
@@ -62,6 +62,7 @@ title | String | - | 标题 | N
 value | String / Number | - | 选中值。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 default-value | String / Number | undefined | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 visible | Boolean | false | 是否显示 | N
+custom-locale | String | 'zh' | 组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
 
 ### DateTimePicker Events
 
@@ -81,6 +82,17 @@ t-class-confirm | 确认样式类
 t-class-cancel | 取消样式类
 t-class-title | 标题样式类
 
+### DateTimePicker 组件国际化
+组件支持国际化，目前支持：简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言，默认为简体中文(zh)。使用方式如下：
+- 全局设置语言： 在小程序全局入口设置 `dayjs` 的语言即可，示例：
+```js
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn'); // 全局设置为简体中文
+```
+- 单个组件设置：在组件上添加 custom-locale 属性即可，注意：custom-locale 优先级高于全局设置。
+
 ### CSS 变量
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 

diff --git a/src/date-time-picker/date-time-picker.ts b/src/date-time-picker/date-time-picker.ts
@@ -1,10 +1,22 @@
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
+import localeData from 'dayjs/plugin/localeData';
+
 import config from '../common/config';
 import { SuperComponent, wxComponent } from '../common/src/index';
-import defaultLocale from './locale/zh';
 
 import props from './props';
+import dayjsLocaleMap from './locale/dayjs';
+/**
+ * dayjs LocaleData 插件
+ * https://dayjs.fenxianglu.cn/category/plugin.html#localedata
+ */
+dayjs.extend(localeData);
+// 设置 demo 的默认语言为 zh
+dayjs.locale('zh-cn');
+
+// const defaultLocale = dayjsLocaleMap.default.key;
+const defaultLocale = dayjsLocaleMap[dayjs.locale()]?.key || dayjsLocaleMap.default?.key;
 
 const { prefix } = config;
 const name = `${prefix}-date-time-picker`;
@@ -45,6 +57,14 @@ export default class DateTimePicker extends SuperComponent {
       this.updateColumns();
     },
 
+    customLocale(v) {
+      if (!v || !dayjsLocaleMap[v].key) return;
+      this.setData({
+        locale: dayjsLocaleMap[v].i18n,
+        dayjsLocale: dayjsLocaleMap[v].key,
+      });
+    },
+
     mode(m) {
       const fullModes = this.getFullModeArray(m);
       this.setData({
@@ -62,7 +82,8 @@ export default class DateTimePicker extends SuperComponent {
     columns: [],
     columnsValue: [],
     fullModes: [],
-    locale: defaultLocale,
+    locale: dayjsLocaleMap[defaultLocale].i18n, // 国际化语言包
+    dayjsLocale: dayjsLocaleMap[defaultLocale].key, // dayjs 自适应的 key
   };
 
   controlledProps = [
@@ -172,12 +193,12 @@ export default class DateTimePicker extends SuperComponent {
       const minEdge = this.getOptionEdge('min', type);
       const maxEdge = this.getOptionEdge('max', type);
       const step = steps?.[type] ?? 1;
+      const dayjsMonthsShort = dayjs().locale(this.data.dayjsLocale).localeData().monthsShort();
 
       for (let i = minEdge; i <= maxEdge; i += step) {
-        const label = type === 'month' ? i + 1 : i;
         options.push({
           value: `${i}`,
-          label: `${label + locale[type]}`,
+          label: type === 'month' ? dayjsMonthsShort[i] : `${i + locale[type]}`,
         });
       }
 
@@ -218,16 +239,16 @@ export default class DateTimePicker extends SuperComponent {
     },
 
     getMonthOptions(): ColumnItemValue[] {
-      const { locale } = this.data;
       const months: ColumnItemValue[] = [];
 
       const minMonth = this.getOptionEdge('min', 'month');
       const maxMonth = this.getOptionEdge('max', 'month');
+      const dayjsMonthsShort = dayjs.monthsShort();
 
       for (let i = minMonth; i <= maxMonth; i += 1) {
         months.push({
           value: `${i}`,
-          label: `${i + 1 + locale.month}`,
+          label: dayjsMonthsShort[i],
         });
       }
 

diff --git a/src/date-time-picker/locale/dayjs.ts b/src/date-time-picker/locale/dayjs.ts
@@ -0,0 +1,81 @@
+// dayjs 语言包
+import enLocale from 'dayjs/locale/en';
+import zhLocale from 'dayjs/locale/zh-cn';
+import tcLocale from 'dayjs/locale/zh-tw'; // 繁体
+import koLocale from 'dayjs/locale/ko'; // 韩语
+import jaLocale from 'dayjs/locale/ja'; // 日语
+import ruLocale from 'dayjs/locale/ru'; // 俄语
+
+// 本地语言包
+import en from './en';
+import zh from './zh';
+import tc from './tc';
+import ko from './ko';
+import ja from './ja';
+import ru from './ru';
+
+export default {
+  default: {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  en: {
+    key: 'en',
+    label: 'English',
+    locale: enLocale,
+    i18n: en,
+  },
+  'zh-cn': {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  // 容错处理
+  zh: {
+    key: 'zh-cn',
+    label: '简体中文',
+    locale: zhLocale,
+    i18n: zh,
+  },
+  'zh-tw': {
+    key: 'zh-tw',
+    label: '繁体中文',
+    locale: tcLocale,
+    i18n: tc,
+  },
+  // 容错处理
+  tc: {
+    key: 'zh-tw',
+    label: '繁体中文',
+    locale: tcLocale,
+    i18n: tc,
+  },
+  ko: {
+    key: 'ko',
+    label: '한국어',
+    locale: koLocale,
+    i18n: ko,
+  },
+  // 容错处理
+  kr: {
+    key: 'ko',
+    label: '한국어',
+    locale: koLocale,
+    i18n: ko,
+  },
+  ja: {
+    key: 'ja',
+    label: '日本語',
+    locale: jaLocale,
+    i18n: ja,
+  },
+  ru: {
+    key: 'ru',
+    label: 'русский',
+    locale: ruLocale,
+    i18n: ru,
+  },
+};
diff --git a/src/date-time-picker/locale/ja.ts b/src/date-time-picker/locale/ja.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '年',
+  month: '月',
+  date: '日',
+  hour: '時',
+  minute: '分',
+  second: '秒',
+  am: '午前',
+  pm: '午後',
+  confirm: '確認',
+  cancel: 'キャンセル',
+};
diff --git a/src/date-time-picker/locale/ko.ts b/src/date-time-picker/locale/ko.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '년',
+  month: '월',
+  date: '일',
+  hour: '시',
+  minute: '분',
+  second: '초',
+  am: '오전',
+  pm: '오후',
+  confirm: '확인',
+  cancel: '취소',
+};
diff --git a/src/date-time-picker/locale/ru.ts b/src/date-time-picker/locale/ru.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '',
+  month: '',
+  date: '',
+  hour: '',
+  minute: '',
+  second: '',
+  am: 'до полудня',
+  pm: 'после полудня',
+  confirm: 'подтвердить',
+  cancel: 'отменить',
+};
diff --git a/src/date-time-picker/locale/tc.ts b/src/date-time-picker/locale/tc.ts
@@ -0,0 +1,12 @@
+export default {
+  year: '年',
+  month: '月',
+  date: '日',
+  hour: '時',
+  minute: '分',
+  second: '秒',
+  am: '上午',
+  pm: '下午',
+  confirm: '確定',
+  cancel: '取消',
+};
diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts
@@ -77,6 +77,10 @@ const props: TdDateTimePickerProps = {
     type: Object,
     value: {},
   },
+  customLocale: {
+    type: String,
+    value: 'zh',
+  },
 };
 
 export default props;
diff --git a/src/date-time-picker/type.ts b/src/date-time-picker/type.ts
@@ -120,6 +120,15 @@ export interface TdDateTimePickerProps {
     type: Object;
     value: {};
   };
+
+  /**
+   * 组件国际化支持
+   * @default zh
+   */
+  customLocale?: {
+    type: StringConstructor;
+    value: String;
+  };
 }
 
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;