diff --git a/src/Picker.tsx b/src/Picker.tsx index e55164449..34a5c445e 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -189,7 +189,7 @@ function InnerPicker(props: PickerProps) { } // ============================= State ============================= - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale)); // Panel ref const panelDivRef = React.useRef(null); diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 22a77952a..e43958a76 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -247,7 +247,9 @@ function InnerRangePicker(props: RangePickerProps) { } // ============================= Misc ============================== - const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours)); + const formatList = toArray( + getDefaultFormat(format, picker, showTime, use12Hours, locale), + ); // Active picker const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, { diff --git a/src/interface.ts b/src/interface.ts index ef362e223..3696e6410 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -8,6 +8,7 @@ export type Locale = { monthBeforeYear?: boolean; yearFormat: string; monthFormat?: string; + weekFormat?: string; quarterFormat?: string; today: string; diff --git a/src/utils/uiUtil.ts b/src/utils/uiUtil.ts index 1ac765c7c..183c54438 100644 --- a/src/utils/uiUtil.ts +++ b/src/utils/uiUtil.ts @@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode'; import raf from 'rc-util/lib/raf'; import isVisible from 'rc-util/lib/Dom/isVisible'; import type { GenerateConfig } from '../generate'; -import type { CustomFormat, PanelMode, PickerMode } from '../interface'; +import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface'; const scrollIds = new Map(); @@ -149,36 +149,33 @@ export function getDefaultFormat( picker: PickerMode | undefined, showTime: boolean | object | undefined, use12Hours: boolean | undefined, + locale: Locale, ) { - let mergedFormat = format; - if (!mergedFormat) { - switch (picker) { - case 'time': - mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss'; - break; - - case 'week': - mergedFormat = 'gggg-wo'; - break; - - case 'month': - mergedFormat = 'YYYY-MM'; - break; - - case 'quarter': - mergedFormat = 'YYYY-[Q]Q'; - break; - - case 'year': - mergedFormat = 'YYYY'; - break; - - default: - mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'; - } + if (format) return format; + + if (picker === 'time') { + return use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss'; + } + + if (picker === 'week') { + return locale.weekFormat ?? 'gggg-wo'; + } + + if (picker === 'month') { + return locale.monthFormat ?? 'YYYY-MM'; + } + + if (picker === 'quarter') { + return locale.quarterFormat ?? 'YYYY-[Q]Q'; + } + + if (picker === 'year') { + return locale.yearFormat ?? 'YYYY'; } - return mergedFormat; + return showTime + ? locale.dateTimeFormat ?? 'YYYY-MM-DD HH:mm:ss' + : locale.dateFormat ?? 'YYYY-MM-DD'; } export function getInputSize( diff --git a/tests/__snapshots__/picker.spec.tsx.snap b/tests/__snapshots__/picker.spec.tsx.snap index ef67cdf5b..cfd8b4b32 100644 --- a/tests/__snapshots__/picker.spec.tsx.snap +++ b/tests/__snapshots__/picker.spec.tsx.snap @@ -1,5 +1,113 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Picker.Basic Picker format by locale date 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale dateTime 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale month 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale quarter 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale week 1`] = ` +
+
+ +
+
+`; + +exports[`Picker.Basic Picker format by locale year 1`] = ` +
+
+ +
+
+`; + exports[`Picker.Basic icon 1`] = `
{ // Reset locale moment.locale('en'); }); + + describe('Picker format by locale', () => { + const myLocale = { + ...zhCN, + dateFormat: 'YYYY 年 M 月 D 日', + dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒', + weekFormat: 'YYYY 年 W 周', + monthFormat: 'YYYY 年 M 月', + quarterFormat: 'YYYY 年 Q 季度', + yearFormat: 'YYYY 年', + }; + + const date = moment('2000-01-01', 'YYYY-MM-DD'); + function matchPicker(name: string, props?: any) { + it(name, () => { + const { container } = render(); + expect(container.firstChild).toMatchSnapshot(); + }); + } + + matchPicker('date'); + matchPicker('dateTime', { showTime: true }); + matchPicker('week', { picker: 'week' }); + matchPicker('month', { picker: 'month' }); + matchPicker('quarter', { picker: 'quarter' }); + matchPicker('year', { picker: 'year' }); + }); });