fix: locale format not working error react-component#687

chore: add test

chore: update test

feat: add type

feat: update logic

chore: update snap

chore: update case

chore: update case

chore: remove note
(cherry picked from commit 01a27a5)

# Conflicts:
#	src/RangePicker.tsx
#	tests/picker.spec.tsx

Author: Wxh16144

src/Picker.tsx

@@ -189,7 +189,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
   }
 
   // ============================= State =============================
-  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
+  const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale));
 
   // Panel ref
   const panelDivRef = React.useRef<HTMLDivElement>(null);

src/RangePicker.tsx

@@ -247,7 +247,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   }
 
   // ============================= Misc ==============================
-  const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
+  const formatList = toArray(
+    getDefaultFormat<DateType>(format, picker, showTime, use12Hours, locale),
+  );
 
   // Active picker
   const [mergedActivePickerIndex, setMergedActivePickerIndex] = useMergedState<0 | 1>(0, {

src/interface.ts

@@ -8,6 +8,7 @@ export type Locale = {
   monthBeforeYear?: boolean;
   yearFormat: string;
   monthFormat?: string;
+  weekFormat?: string;
   quarterFormat?: string;
 
   today: string;

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<HTMLElement, number>();
 
@@ -149,36 +149,33 @@ export function getDefaultFormat<DateType>(
   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<DateType>(

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`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="16"
+      title="2000 年 1 月 1 日"
+      value="2000 年 1 月 1 日"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale dateTime 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="28"
+      title="2000 年 1 月 1 日 0 时 0 分 0 秒"
+      value="2000 年 1 月 1 日 0 时 0 分 0 秒"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale month 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年 1 月"
+      value="2000 年 1 月"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale quarter 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="13"
+      title="2000 年 1 季度"
+      value="2000 年 1 季度"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale week 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年 52 周"
+      value="2000 年 52 周"
+    />
+  </div>
+</div>
+`;
+
+exports[`Picker.Basic Picker format by locale year 1`] = `
+<div
+  class="rc-picker"
+>
+  <div
+    class="rc-picker-input"
+  >
+    <input
+      autocomplete="off"
+      readonly=""
+      size="12"
+      title="2000 年"
+      value="2000 年"
+    />
+  </div>
+</div>
+`;
+
 exports[`Picker.Basic icon 1`] = `
 <div
   class="rc-picker-input"

tests/picker.spec.tsx

@@ -1061,4 +1061,31 @@ describe('Picker.Basic', () => {
     // 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(<MomentPicker value={date} {...props} locale={myLocale} />);
+        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' });
+  });
 });