Skip to content

Commit 01a27a5

Browse files
Wxh16144Wxh16144
committed
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
1 parent f6c6803 commit 01a27a5

6 files changed

Lines changed: 169 additions & 32 deletions

File tree

‎src/Picker.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
210210
}
211211

212212
// ============================= State =============================
213-
const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours));
213+
const formatList = toArray(getDefaultFormat(format, picker, showTime, use12Hours, locale));
214214

215215
// Panel ref
216216
const panelDivRef = React.useRef<HTMLDivElement>(null);

‎src/RangePicker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -277,7 +277,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
277277
}
278278

279279
// ============================= Misc ==============================
280-
const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours));
280+
const formatList = toArray(getDefaultFormat<DateType>(format, picker, showTime, use12Hours, locale));
281281

282282
const formatDateValue = (values: RangeValue<DateType>, index: 0 | 1) =>
283283
values && values[index]
@@ -407,7 +407,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
407407
function triggerChange(
408408
newValue: RangeValue<DateType>,
409409
sourceIndex: 0 | 1,
410-
triggerCalendarChangeOnly?: boolean,
410+
triggerCalendarChangeOnly?: boolean,
411411
) {
412412
let values = newValue;
413413
let startValue = getValue(values, 0);

‎src/interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export type Locale = {
99
monthBeforeYear?: boolean;
1010
yearFormat: string;
1111
monthFormat?: string;
12+
weekFormat?: string;
1213
quarterFormat?: string;
1314

1415
today: string;

‎src/utils/uiUtil.ts‎

Lines changed: 26 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
22
import raf from 'rc-util/lib/raf';
33
import isVisible from 'rc-util/lib/Dom/isVisible';
44
import type { GenerateConfig } from '../generate';
5-
import type { CustomFormat, PanelMode, PickerMode } from '../interface';
5+
import type { CustomFormat, PanelMode, PickerMode, Locale } from '../interface';
66

77
const scrollIds = new Map<HTMLElement, number>();
88

@@ -149,36 +149,34 @@ export function getDefaultFormat<DateType>(
149149
picker: PickerMode | undefined,
150150
showTime: boolean | object | undefined,
151151
use12Hours: boolean | undefined,
152+
locale: Locale,
152153
) {
153-
let mergedFormat = format;
154-
if (!mergedFormat) {
155-
switch (picker) {
156-
case 'time':
157-
mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
158-
break;
159-
160-
case 'week':
161-
mergedFormat = 'gggg-wo';
162-
break;
163-
164-
case 'month':
165-
mergedFormat = 'YYYY-MM';
166-
break;
167-
168-
case 'quarter':
169-
mergedFormat = 'YYYY-[Q]Q';
170-
break;
171-
172-
case 'year':
173-
mergedFormat = 'YYYY';
174-
break;
175-
176-
default:
177-
mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
178-
}
154+
if (format) return format;
155+
156+
if (picker === 'time') {
157+
return use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss';
158+
}
159+
160+
if (picker === 'week') {
161+
return locale.weekFormat ?? 'gggg-wo';
162+
}
163+
164+
if (picker === 'month') {
165+
return locale.monthFormat ?? 'YYYY-MM';
179166
}
180167

181-
return mergedFormat;
168+
if (picker === 'quarter') {
169+
return locale.quarterFormat ?? 'YYYY-[Q]Q';
170+
}
171+
172+
if (picker === 'year') {
173+
return locale.yearFormat ?? 'YYYY';
174+
}
175+
176+
return showTime
177+
? (locale.dateTimeFormat ?? 'YYYY-MM-DD HH:mm:ss')
178+
: (locale.dateFormat ?? 'YYYY-MM-DD');
179+
182180
}
183181

184182
export function getInputSize<DateType>(

‎tests/__snapshots__/picker.spec.tsx.snap‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,113 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Picker.Basic Picker format by locale date 1`] = `
4+
<div
5+
class="rc-picker"
6+
>
7+
<div
8+
class="rc-picker-input"
9+
>
10+
<input
11+
autocomplete="off"
12+
readonly=""
13+
size="16"
14+
title="2000 年 1 月 1 日"
15+
value="2000 年 1 月 1 日"
16+
/>
17+
</div>
18+
</div>
19+
`;
20+
21+
exports[`Picker.Basic Picker format by locale dateTime 1`] = `
22+
<div
23+
class="rc-picker"
24+
>
25+
<div
26+
class="rc-picker-input"
27+
>
28+
<input
29+
autocomplete="off"
30+
readonly=""
31+
size="28"
32+
title="2000 年 1 月 1 日 0 时 0 分 0 秒"
33+
value="2000 年 1 月 1 日 0 时 0 分 0 秒"
34+
/>
35+
</div>
36+
</div>
37+
`;
38+
39+
exports[`Picker.Basic Picker format by locale month 1`] = `
40+
<div
41+
class="rc-picker"
42+
>
43+
<div
44+
class="rc-picker-input"
45+
>
46+
<input
47+
autocomplete="off"
48+
readonly=""
49+
size="12"
50+
title="2000 年 1 月"
51+
value="2000 年 1 月"
52+
/>
53+
</div>
54+
</div>
55+
`;
56+
57+
exports[`Picker.Basic Picker format by locale quarter 1`] = `
58+
<div
59+
class="rc-picker"
60+
>
61+
<div
62+
class="rc-picker-input"
63+
>
64+
<input
65+
autocomplete="off"
66+
readonly=""
67+
size="13"
68+
title="2000 年 1 季度"
69+
value="2000 年 1 季度"
70+
/>
71+
</div>
72+
</div>
73+
`;
74+
75+
exports[`Picker.Basic Picker format by locale week 1`] = `
76+
<div
77+
class="rc-picker"
78+
>
79+
<div
80+
class="rc-picker-input"
81+
>
82+
<input
83+
autocomplete="off"
84+
readonly=""
85+
size="12"
86+
title="2000 年 52 周"
87+
value="2000 年 52 周"
88+
/>
89+
</div>
90+
</div>
91+
`;
92+
93+
exports[`Picker.Basic Picker format by locale year 1`] = `
94+
<div
95+
class="rc-picker"
96+
>
97+
<div
98+
class="rc-picker-input"
99+
>
100+
<input
101+
autocomplete="off"
102+
readonly=""
103+
size="12"
104+
title="2000 年"
105+
value="2000 年"
106+
/>
107+
</div>
108+
</div>
109+
`;
110+
3111
exports[`Picker.Basic icon 1`] = `
4112
<div
5113
class="rc-picker-input"

‎tests/picker.spec.tsx‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -781,7 +781,7 @@ describe('Picker.Basic', () => {
781781
it('defaultOpenValue in timePicker', () => {
782782
resetWarned();
783783
const onChange = jest.fn();
784-
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
784+
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => { });
785785

786786
const { container } = render(
787787
<MomentPicker
@@ -1145,4 +1145,34 @@ describe('Picker.Basic', () => {
11451145

11461146
expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10');
11471147
});
1148+
1149+
describe('Picker format by locale', () => {
1150+
const myLocale = {
1151+
...zhCN,
1152+
dateFormat: 'YYYY 年 M 月 D 日',
1153+
dateTimeFormat: 'YYYY 年 M 月 D 日 H 时 m 分 s 秒',
1154+
weekFormat: 'YYYY 年 W 周',
1155+
monthFormat: 'YYYY 年 M 月',
1156+
quarterFormat: 'YYYY 年 Q 季度',
1157+
yearFormat: 'YYYY 年',
1158+
};
1159+
1160+
const date = moment('2000-01-01', 'YYYY-MM-DD');
1161+
function matchPicker(name: string, props?: any) {
1162+
it(name, () => {
1163+
const { container } = render(
1164+
<MomentPicker value={date} {...props} locale={myLocale} />
1165+
);
1166+
expect(container.firstChild).toMatchSnapshot();
1167+
});
1168+
}
1169+
1170+
matchPicker('date');
1171+
matchPicker('dateTime', { showTime: true });
1172+
matchPicker('week', { picker: 'week' });
1173+
matchPicker('month', { picker: 'month' });
1174+
matchPicker('quarter', { picker: 'quarter' });
1175+
matchPicker('year', { picker: 'year' });
1176+
});
1177+
11481178
});

0 commit comments

Comments
 (0)