diff --git a/README.md b/README.md
index 79eed2bce..6a071668d 100644
--- a/README.md
+++ b/README.md
@@ -129,7 +129,7 @@ render(, mountNode);
| selectable | [Boolean, Boolean] | | whether to selected picker |
| disabled | Boolean | false | whether the range picker is disabled |
| onChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the selected time is changing |
-| onCalendarChange | Function(value:[moment], formatString: [string, string]) | | a callback function, can be executed when the start time or the end time of the range is changing |
+| onCalendarChange | Function(value:[moment], formatString: [string, string], info: { range:'start'\|'end' }) | | a callback function, can be executed when the start time or the end time of the range is changing |
| direction | String: ltr or rtl | | Layout direction of picker component, it supports RTL direction too. |
| order | Boolean | true | (TimeRangePicker only) `false` to disable auto order |
diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
index 19378e8e4..3b232da18 100644
--- a/src/RangePicker.tsx
+++ b/src/RangePicker.tsx
@@ -62,12 +62,16 @@ function canValueTrigger(
return false;
}
+export type RangeType = 'start' | 'end';
+
+export interface RangeInfo {
+ range: RangeType;
+}
+
export type RangeDateRender = (
currentDate: DateType,
today: DateType,
- info: {
- range: 'start' | 'end';
- },
+ info: RangeInfo,
) => React.ReactNode;
export interface RangePickerSharedProps {
@@ -77,7 +81,7 @@ export interface RangePickerSharedProps {
defaultPickerValue?: [DateType, DateType];
placeholder?: [string, string];
disabled?: boolean | [boolean, boolean];
- disabledTime?: (date: EventValue, type: 'start' | 'end') => DisabledTimes;
+ disabledTime?: (date: EventValue, type: RangeType) => DisabledTimes;
ranges?: Record<
string,
Exclude, null> | (() => Exclude, null>)
@@ -86,7 +90,11 @@ export interface RangePickerSharedProps {
allowEmpty?: [boolean, boolean];
mode?: [PanelMode, PanelMode];
onChange?: (values: RangeValue, formatString: [string, string]) => void;
- onCalendarChange?: (values: RangeValue, formatString: [string, string]) => void;
+ onCalendarChange?: (
+ values: RangeValue,
+ formatString: [string, string],
+ info: RangeInfo,
+ ) => void;
onPanelChange?: (values: RangeValue, modes: [PanelMode, PanelMode]) => void;
onFocus?: React.FocusEventHandler;
onBlur?: React.FocusEventHandler;
@@ -436,7 +444,9 @@ function InnerRangePicker(props: RangePickerProps) {
: '';
if (onCalendarChange) {
- onCalendarChange(values, [startStr, endStr]);
+ const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' };
+
+ onCalendarChange(values, [startStr, endStr], info);
}
// >>>>> Trigger `onChange` event
diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx
index bec2bd7b9..78919ce47 100644
--- a/tests/range.spec.tsx
+++ b/tests/range.spec.tsx
@@ -843,14 +843,29 @@ describe('Picker.Range', () => {
// Not trigger when not value
expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy();
+ expect(onCalendarChange).not.toHaveBeenCalled();
- // Trigger when valued
+ // Trigger when start Ok'd
onCalendarChange.mockReset();
wrapper.selectCell(11);
+ expect(onCalendarChange).not.toHaveBeenCalled();
wrapper.find('.rc-picker-ok button').simulate('click');
expect(onCalendarChange).toHaveBeenCalledWith(
[expect.anything(), null],
['1990-09-11 00:00:00', ''],
+ { range: 'start' },
+ );
+ expect(onOk).toHaveBeenCalled();
+
+ // Trigger when end Ok'd
+ onCalendarChange.mockReset();
+ wrapper.selectCell(23);
+ expect(onCalendarChange).not.toHaveBeenCalled();
+ wrapper.find('.rc-picker-ok button').simulate('click');
+ expect(onCalendarChange).toHaveBeenCalledWith(
+ [expect.anything(), expect.anything()],
+ ['1990-09-11 00:00:00', '1990-09-23 00:00:00'],
+ { range: 'end' },
);
expect(onOk).toHaveBeenCalled();
});
@@ -1387,4 +1402,28 @@ describe('Picker.Range', () => {
const wrapper = mount( Light
} />);
expect(wrapper.render()).toMatchSnapshot();
});
+
+ describe('Selection callbacks', () => {
+ it('selection provide info for onCalendarChange', () => {
+ const onCalendarChange = jest.fn();
+
+ const wrapper = mount();
+
+ wrapper.openPicker();
+
+ // Start date
+ wrapper.selectCell(11);
+ expect(onCalendarChange).toHaveBeenCalledWith([expect.anything(), null], ['1990-09-11', ''], {
+ range: 'start',
+ });
+
+ // End date
+ wrapper.selectCell(23);
+ expect(onCalendarChange).toHaveBeenCalledWith(
+ [expect.anything(), expect.anything()],
+ ['1990-09-11', '1990-09-23'],
+ { range: 'end' },
+ );
+ });
+ });
});