From 2f903eb3c3556186d6223b9bd9023533f2977c68 Mon Sep 17 00:00:00 2001 From: eric lua Date: Fri, 1 Dec 2023 18:08:03 +0800 Subject: [PATCH 1/4] feat(datetimepicker): date-picker MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DateTimePicker 组件支持国际化 re #2367 --- src/date-time-picker/README.md | 12 ++++ src/date-time-picker/date-time-picker.ts | 33 ++++++++-- src/date-time-picker/locale/dayjs.ts | 81 ++++++++++++++++++++++++ src/date-time-picker/locale/ja.ts | 12 ++++ src/date-time-picker/locale/ko.ts | 12 ++++ src/date-time-picker/locale/ru.ts | 22 +++++++ src/date-time-picker/locale/tc.ts | 12 ++++ src/date-time-picker/props.ts | 4 ++ src/date-time-picker/type.ts | 9 +++ 9 files changed, 191 insertions(+), 6 deletions(-) create mode 100644 src/date-time-picker/locale/dayjs.ts create mode 100644 src/date-time-picker/locale/ja.ts create mode 100644 src/date-time-picker/locale/ko.ts create mode 100644 src/date-time-picker/locale/ru.ts create mode 100644 src/date-time-picker/locale/tc.ts diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md index e40d22f98..d7d3b5094 100644 --- 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 index 2c66caeb8..59090915d 100644 --- 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 new file mode 100644 index 000000000..d03a602e4 --- /dev/null +++ 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 new file mode 100644 index 000000000..07569740e --- /dev/null +++ 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 new file mode 100644 index 000000000..76a395310 --- /dev/null +++ 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 new file mode 100644 index 000000000..7f9edb0be --- /dev/null +++ b/src/date-time-picker/locale/ru.ts @@ -0,0 +1,22 @@ +export default { + // year: 'год', + // month: 'месяц', + // date: 'дата', + // hour: 'час', + // minute: 'минута', + // second: 'секунда', + // am: 'до полудня', + // pm: 'после полудня', + // confirm: 'подтвердить', + // cancel: 'отменить', + 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 new file mode 100644 index 000000000..58e7cbfe5 --- /dev/null +++ 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 index afbe8c19a..6cc3a334a 100644 --- 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 index c48a99f2a..26c63a488 100644 --- 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; From f212586740abe31932260cb27311ec45b824d988 Mon Sep 17 00:00:00 2001 From: eric lua Date: Sun, 3 Dec 2023 19:01:55 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix(date-time-picker):=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=86=97=E4=BD=99=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/date-time-picker/locale/ru.ts | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/date-time-picker/locale/ru.ts b/src/date-time-picker/locale/ru.ts index 7f9edb0be..23c707c8e 100644 --- a/src/date-time-picker/locale/ru.ts +++ b/src/date-time-picker/locale/ru.ts @@ -1,14 +1,4 @@ export default { - // year: 'год', - // month: 'месяц', - // date: 'дата', - // hour: 'час', - // minute: 'минута', - // second: 'секунда', - // am: 'до полудня', - // pm: 'после полудня', - // confirm: 'подтвердить', - // cancel: 'отменить', year: '', month: '', date: '', From 56782d19826b842c65c9f92c81c8407acd84cd29 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 4 Dec 2023 11:35:38 +0800 Subject: [PATCH 3/4] Update README.md --- src/date-time-picker/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md index d7d3b5094..1e0399848 100644 --- a/src/date-time-picker/README.md +++ b/src/date-time-picker/README.md @@ -62,7 +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 +custom-locale | String | 'zh' | 组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N ### DateTimePicker Events From 953aaf13395299a4c6f717c52d5eba68e5940778 Mon Sep 17 00:00:00 2001 From: Y Date: Mon, 4 Dec 2023 11:37:18 +0800 Subject: [PATCH 4/4] Update README.md --- src/date-time-picker/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md index 1e0399848..d5e49557f 100644 --- a/src/date-time-picker/README.md +++ b/src/date-time-picker/README.md @@ -83,15 +83,15 @@ t-class-cancel | 取消样式类 t-class-title | 标题样式类 ### DateTimePicker 组件国际化 -组件支持国际化，目前支持: 简体中文(zh), (tc), 英文(en), 日语(ja), 韩语(ko), 俄语(ru) 六种语言。默认为简体中文(zh)。使用方式如下： -- 全局设置语言: 在小程序全局入口设置 dayjs 的语言即可，示例： +组件支持国际化，目前支持：简体中文(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 优先级高于全局设置。 +- 单个组件设置：在组件上添加 custom-locale 属性即可，注意：custom-locale 优先级高于全局设置。 ### CSS 变量 组件提供了下列 CSS 变量，可用于自定义样式。