diff --git a/src/Picker.tsx b/src/Picker.tsx index fa23fa4d5..bceb4d039 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -213,7 +213,7 @@ function InnerPicker(props: PickerProps) { }); // ============================= Text ============================== - const valueTexts = useValueTexts(selectedValue, { + const [valueTexts, firstValueText] = useValueTexts(selectedValue, { formatList, generateConfig, locale, @@ -316,7 +316,7 @@ function InnerPicker(props: PickerProps) { if (!valueTexts.length || valueTexts[0] === '') { triggerTextChange(''); - } else if (!valueTexts.includes(text)) { + } else if (firstValueText !== text) { resetText(); } } diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index bcb08b2b5..613a8a28f 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -472,9 +472,15 @@ function InnerRangePicker(props: RangePickerProps) { locale, }; - const startValueTexts = useValueTexts(getValue(selectedValue, 0), sharedTextHooksProps); + const [startValueTexts, firstStartValueText] = useValueTexts( + getValue(selectedValue, 0), + sharedTextHooksProps, + ); - const endValueTexts = useValueTexts(getValue(selectedValue, 1), sharedTextHooksProps); + const [endValueTexts, firstEndValueText] = useValueTexts( + getValue(selectedValue, 1), + sharedTextHooksProps, + ); const onTextChange = (newText: string, index: 0 | 1) => { const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList); @@ -552,12 +558,12 @@ function InnerRangePicker(props: RangePickerProps) { if (!startValueTexts.length || startValueTexts[0] === '') { triggerStartTextChange(''); - } else if (!startValueTexts.includes(startText)) { + } else if (firstStartValueText !== startText) { resetStartText(); } if (!endValueTexts.length || endValueTexts[0] === '') { triggerEndTextChange(''); - } else if (!endValueTexts.includes(endText)) { + } else if (firstEndValueText !== endText) { resetEndText(); } } diff --git a/src/hooks/useValueTexts.ts b/src/hooks/useValueTexts.ts index b78c9172f..5aa7de037 100644 --- a/src/hooks/useValueTexts.ts +++ b/src/hooks/useValueTexts.ts @@ -13,14 +13,27 @@ export default function useValueTexts( value: DateType | null, { formatList, generateConfig, locale }: ValueTextConfig, ) { - return useMemo( + return useMemo<[string[], string]>( () => { if (!value) { - return ['']; + return [[''], '']; } - return formatList.map(subFormat => - generateConfig.locale.format(locale.locale, value, subFormat), - ); + + // We will convert data format back to first format + let firstValueText: string = ''; + const fullValueTexts: string[] = []; + + for (let i = 0; i < formatList.length; i += 1) { + const format = formatList[i]; + const formatStr = generateConfig.locale.format(locale.locale, value, format); + fullValueTexts.push(formatStr); + + if (i === 0) { + firstValueText = formatStr; + } + } + + return [fullValueTexts, firstValueText]; }, [value, formatList], (prev, next) => prev[0] !== next[0] || !shallowEqual(prev[1], next[1]), diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index ad1fa3fcc..f429d330f 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -640,4 +640,16 @@ describe('Picker.Basic', () => { .text(), ).toEqual('1990-10-06'); }); + + it('format', () => { + const wrapper = mount(); + wrapper.openPicker(); + wrapper.find('input').simulate('change', { + target: { + value: '2000-01-01', + }, + }); + wrapper.closePicker(); + expect(wrapper.find('input').prop('value')).toEqual('20000101'); + }); }); diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index aea19fcb4..da1852c04 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1155,4 +1155,49 @@ describe('Picker.Range', () => { wrapper.openPicker(1); expect(wrapper.findCell('15').hasClass('rc-picker-cell-disabled')).toBeFalsy(); }); + + it('format', () => { + const wrapper = mount( + , + ); + + // Start date + wrapper.openPicker(); + wrapper + .find('input') + .first() + .simulate('change', { + target: { + value: '1989-09-03', + }, + }); + wrapper.closePicker(); + expect( + wrapper + .find('input') + .first() + .prop('value'), + ).toEqual('19890903'); + + // end date + wrapper.openPicker(1); + wrapper + .find('input') + .last() + .simulate('change', { + target: { + value: '1990-11-28', + }, + }); + wrapper.closePicker(1); + expect( + wrapper + .find('input') + .last() + .prop('value'), + ).toEqual('19901128'); + }); });