diff --git a/examples/range.tsx b/examples/range.tsx index 471f88a..b7ad8b3 100644 --- a/examples/range.tsx +++ b/examples/range.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import moment, { Moment } from 'moment'; +import type { Moment } from 'moment'; +import moment from 'moment'; import RangePicker from '../src/RangePicker'; import momentGenerateConfig from '../src/generate/moment'; import zhCN from '../src/locale/zh_CN'; @@ -40,6 +41,11 @@ export default () => { const rangePickerRef = React.useRef>(null); + const now = momentGenerateConfig.getNow(); + const disabledDate = (current: Moment) => { + return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1; + }; + return (

Value: {value ? `${formatDate(value[0])} ~ ${formatDate(value[1])}` : 'null'}

@@ -67,7 +73,7 @@ export default () => { ranges={{ ranges: [moment(), moment().add(10, 'day')], }} - onOk={dates => { + onOk={(dates) => { console.log('OK!!!', dates); }} /> @@ -162,6 +168,16 @@ export default () => { placeholder={['start...', 'end...']} />
+
+

DisabledDate

+ + {...sharedProps} + value={undefined} + locale={zhCN} + placeholder={['start...', 'end...']} + disabledDate={disabledDate} + /> +
); diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index fc4031c..d529034 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -603,6 +603,15 @@ function InnerRangePicker(props: RangePickerProps) { triggerOpen(newOpen, index); }, onSubmit: () => { + if ( + // When user typing disabledDate with keyboard and enter, this value will be empty + !selectedValue || + // Normal disabled check + (disabledDate && disabledDate(selectedValue[index])) + ) { + return false; + } + triggerChange(selectedValue, index); resetText(); }, diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index b863466..9223f97 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -4,6 +4,7 @@ import { act } from 'react-dom/test-utils'; import KeyCode from 'rc-util/lib/KeyCode'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import type { Moment } from 'moment'; +import moment from 'moment'; import type { Wrapper } from './util/commonUtil'; import { mount, getMoment, isSame, MomentRangePicker } from './util/commonUtil'; import zhCN from '../src/locale/zh_CN'; @@ -1544,4 +1545,28 @@ describe('Picker.Range', () => { wrapper.simulate('mouseleave'); expect(handleMouseLeave).toHaveBeenCalled(); }); + + // https://github.com/ant-design/ant-design/issues/31334 + it('keyboard should not trigger on disabledDate', () => { + const onCalendarChange = jest.fn(); + const now = moment(); + const disabledDate = (current: Moment) => { + return current.diff(now, 'days') > 1 || current.diff(now, 'days') < -1; + }; + const wrapper = mount( + , + ); + wrapper.find('input').first().simulate('focus'); + wrapper.keyDown(KeyCode.ENTER); + wrapper.keyDown(KeyCode.TAB); + // Make sure the selected value is disabledDate. Because only a few values are disabledDate + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.DOWN); + wrapper.keyDown(KeyCode.ENTER); + expect(onCalendarChange).not.toHaveBeenCalled(); + }); });