diff --git a/docs/demo/locale.md b/docs/demo/locale.md
new file mode 100644
index 000000000..076460e55
--- /dev/null
+++ b/docs/demo/locale.md
@@ -0,0 +1,8 @@
+---
+title: locale
+nav:
+ title: Demo
+ path: /demo
+---
+
+
diff --git a/docs/examples/locale.tsx b/docs/examples/locale.tsx
new file mode 100644
index 000000000..c533b4cd4
--- /dev/null
+++ b/docs/examples/locale.tsx
@@ -0,0 +1,56 @@
+import type { Moment } from 'moment';
+import moment from 'moment';
+import 'moment/locale/zh-cn';
+import React from 'react';
+import '../../assets/index.less';
+import momentGenerateConfig from '../../src/generate/moment';
+import enUS from '../../src/locale/en_US';
+import zhCN from '../../src/locale/zh_CN';
+import Picker from '../../src/Picker';
+
+// const defaultValue = moment('2019-09-03 05:02:03');
+const defaultValue = moment('2019-11-28 01:02:03');
+
+export default () => {
+ const [locale, setLocale] = React.useState(enUS);
+ const [value, setValue] = React.useState(defaultValue);
+
+ const onChange = (newValue: Moment | null, formatString?: string) => {
+ console.log('Change:', newValue, formatString);
+ setValue(newValue);
+ };
+
+ const sharedProps = {
+ generateConfig: momentGenerateConfig,
+ value,
+ onChange,
+ presets: [
+ {
+ label: 'Hello World!',
+ value: moment(),
+ },
+ {
+ label: 'Now',
+ value: () => moment(),
+ },
+ ],
+ };
+
+ return (
+
+
{...sharedProps} locale={locale} format="dddd" />
+
+
+ );
+};
diff --git a/src/hooks/useValueTexts.ts b/src/hooks/useValueTexts.ts
index 8f9380062..9c185e5fe 100644
--- a/src/hooks/useValueTexts.ts
+++ b/src/hooks/useValueTexts.ts
@@ -36,11 +36,13 @@ export default function useValueTexts(
return [fullValueTexts, firstValueText];
},
- [value, formatList],
+ [value, formatList, locale],
(prev, next) =>
// Not Same Date
!isEqual(generateConfig, prev[0], next[0]) ||
// Not Same format
- !shallowEqual(prev[1], next[1], true),
+ !shallowEqual(prev[1], next[1], true) ||
+ // Not Same locale
+ !shallowEqual(prev[2], next[2], true),
);
}
diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx
index d42aba43f..694039a7c 100644
--- a/tests/picker.spec.tsx
+++ b/tests/picker.spec.tsx
@@ -2,11 +2,14 @@
import { act, createEvent, fireEvent, render } from '@testing-library/react';
import type { Moment } from 'moment';
import moment from 'moment';
+import 'moment/locale/zh-cn';
import KeyCode from 'rc-util/lib/KeyCode';
import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
import { resetWarned } from 'rc-util/lib/warning';
import React from 'react';
import type { PanelMode, PickerMode } from '../src/interface';
+import enUS from '../src/locale/en_US';
+import zhCN from '../src/locale/zh_CN';
import {
clearValue,
closePicker,
@@ -555,7 +558,7 @@ describe('Picker.Basic', () => {
);
expect(document.querySelector('.rc-picker-input')).toMatchSnapshot();
expect(errorSpy).toHaveBeenCalledWith(
- 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.'
+ 'Warning: `clearIcon` will be removed in future. Please use `allowClear` instead.',
);
});
@@ -626,7 +629,9 @@ describe('Picker.Basic', () => {
expect(errorSpy).not.toBeCalled();
const { container } = render();
openPicker(container);
- expect(errorSpy).toBeCalledWith('Warning: `hourStep` 9 is invalid. It should be a factor of 24.');
+ expect(errorSpy).toBeCalledWith(
+ 'Warning: `hourStep` 9 is invalid. It should be a factor of 24.',
+ );
});
it('should show warning when minute step is invalid', () => {
@@ -656,7 +661,9 @@ describe('Picker.Basic', () => {
const { container } = render();
openPicker(container);
- const column = document.querySelector(`.rc-picker-time-panel-column:nth-child(${index + 1})`);
+ const column = document.querySelector(
+ `.rc-picker-time-panel-column:nth-child(${index + 1})`,
+ );
expect(column).toBeTruthy();
const cells = column.querySelectorAll('.rc-picker-time-panel-cell-inner');
@@ -748,7 +755,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(
{
expect(onChange.mock.calls[1][0].format('YYYY-MM-DD HH:mm:ss')).toEqual('2023-05-01 12:34:56');
});
+
+ it('switch picker locale should reformat value', () => {
+ const { container, rerender } = render(
+ ,
+ );
+ expect(container.querySelector('input').value).toEqual('Friday');
+
+ // Switch locale
+ moment.locale('zh-cn');
+ rerender();
+ expect(container.querySelector('input').value).toEqual('ζζδΊ');
+
+ // Reset locale
+ moment.locale('en');
+ });
});