diff --git a/src/Picker.tsx b/src/Picker.tsx index 40321642e..f0980a324 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -22,7 +22,7 @@ import PickerPanel, { PickerPanelTimeProps, } from './PickerPanel'; import PickerTrigger from './PickerTrigger'; -import { formatValue, isEqual } from './utils/dateUtil'; +import { formatValue, isEqual, parseValue } from './utils/dateUtil'; import getDataOrAriaProps, { toArray } from './utils/miscUtil'; import PanelContext, { ContextOperationRefProps } from './PanelContext'; import { CustomFormat, PickerMode } from './interface'; @@ -225,7 +225,11 @@ function InnerPicker(props: PickerProps) { const [text, triggerTextChange, resetText] = useTextValueMapping({ valueTexts, onTextChange: newText => { - const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList as string[]); + const inputDate = parseValue(newText, { + locale, + formatList, + generateConfig, + }); if (inputDate && (!disabledDate || !disabledDate(inputDate))) { setSelectedValue(inputDate); } diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 5cbe6858d..f7268b1a3 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -19,6 +19,7 @@ import { isSameWeek, isSameQuarter, formatValue, + parseValue, } from './utils/dateUtil'; import useValueTexts from './hooks/useValueTexts'; import useTextValueMapping from './hooks/useTextValueMapping'; @@ -516,7 +517,11 @@ function InnerRangePicker(props: RangePickerProps) { ); const onTextChange = (newText: string, index: 0 | 1) => { - const inputDate = generateConfig.locale.parse(locale.locale, newText, formatList as string[]); + const inputDate = parseValue(newText, { + locale, + formatList, + generateConfig, + }); const disabledFunc = index === 0 ? disabledStartDate : disabledEndDate; diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts index 8d7a2f603..3a718b31f 100644 --- a/src/utils/dateUtil.ts +++ b/src/utils/dateUtil.ts @@ -209,3 +209,22 @@ export function formatValue( ? format(value) : generateConfig.locale.format(locale.locale, value, format); } + +export function parseValue( + value: string, + { + generateConfig, + locale, + formatList, + }: { + generateConfig: GenerateConfig; + locale: Locale; + formatList: Array>; + }, +) { + if (!value || typeof formatList[0] === 'function') { + return null; + } + + return generateConfig.locale.parse(locale.locale, value, formatList as string[]); +} diff --git a/tests/picker.spec.tsx b/tests/picker.spec.tsx index 7e5931b6c..92a44c488 100644 --- a/tests/picker.spec.tsx +++ b/tests/picker.spec.tsx @@ -729,6 +729,7 @@ describe('Picker.Basic', () => { it('custom format', () => { const wrapper = mount( `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} />, @@ -738,6 +739,11 @@ describe('Picker.Basic', () => { wrapper.selectCell(24); wrapper.closePicker(); expect(wrapper.find('input').prop('value')).toEqual('custom format:20200924'); + + // clear + const clearNode = wrapper.find('.rc-picker-clear'); + expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow(); + expect(wrapper.find('input').prop('value')).toEqual(''); }); it('panelRender', () => { diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index d8c9e336f..3f4c1bcea 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1256,6 +1256,7 @@ describe('Picker.Range', () => { it('custom format', () => { const wrapper = mount( `custom format:${val.format('YYYYMMDD')}`, 'YYYY-MM-DD']} defaultValue={[getMoment('2020-09-17'), getMoment('2020-10-17')]} />, @@ -1296,6 +1297,22 @@ describe('Picker.Range', () => { .last() .prop('value'), ).toEqual('custom format:20201024'); + + // clear + const clearNode = wrapper.find('.rc-picker-clear'); + expect(clearNode.simulate.bind(clearNode, 'mouseUp')).not.toThrow(); + expect( + wrapper + .find('input') + .first() + .prop('value'), + ).toEqual(''); + expect( + wrapper + .find('input') + .last() + .prop('value'), + ).toEqual(''); }); describe('auto open', () => {