Skip to content
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

fix: locale format not working error #687

Draft
wants to merge 8 commits into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
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
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions src/RangePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down Expand Up @@ -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);
Expand Down
1 change: 1 addition & 0 deletions src/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export type Locale = {
monthBeforeYear?: boolean;
yearFormat: string;
monthFormat?: string;
weekFormat?: string;
quarterFormat?: string;

today: string;
Expand Down
55 changes: 27 additions & 28 deletions src/utils/uiUtil.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>();

Expand Down Expand Up @@ -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>(
Expand Down
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"
Expand Down
32 changes: 31 additions & 1 deletion tests/picker.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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

});
Loading