Skip to content

fix: locale format not working error #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Picker.tsx
Original file line number Diff line number Diff line change
@@ -210,7 +210,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);
4 changes: 2 additions & 2 deletions src/RangePicker.tsx
Original file line number Diff line number Diff line change
@@ -277,7 +277,7 @@ 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));

const formatDateValue = (values: RangeValue<DateType>, index: 0 | 1) =>
values && values[index]
@@ -407,7 +407,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
function triggerChange(
newValue: RangeValue<DateType>,
sourceIndex: 0 | 1,
triggerCalendarChangeOnly?: boolean,
triggerCalendarChangeOnly?: boolean,
) {
let values = newValue;
let startValue = getValue(values, 0);
1 change: 1 addition & 0 deletions src/interface.ts
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ export type Locale = {
monthBeforeYear?: boolean;
yearFormat: string;
monthFormat?: string;
weekFormat?: string;
quarterFormat?: string;

today: string;
55 changes: 27 additions & 28 deletions src/utils/uiUtil.ts
Original file line number Diff line number Diff line change
@@ -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,35 @@ 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';
}
// let mergedFormat = format;
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';
}

return mergedFormat;
if (picker === 'quarter') {
return locale.quarterFormat ?? 'YYYY-[Q]Q';
}

if (picker === 'year') {
return locale.yearFormat ?? 'YYYY';
}

return showTime
? (locale.dateTimeFormat ?? 'YYYY-MM-DD HH:mm:ss')
: (locale.dateFormat ?? 'YYYY-MM-DD');

}

export function getInputSize<DateType>(
108 changes: 108 additions & 0 deletions tests/__snapshots__/picker.spec.tsx.snap
Original file line number Diff line number Diff line change
@@ -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"
32 changes: 31 additions & 1 deletion tests/picker.spec.tsx
Original file line number Diff line number Diff line change
@@ -781,7 +781,7 @@ describe('Picker.Basic', () => {
it('defaultOpenValue in timePicker', () => {
resetWarned();
const onChange = jest.fn();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => { });

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

expect(container.querySelector('input')).toHaveValue('2023-09-04 21:05:10');
});

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' });
});

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

});