diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index f4d8095b8..4ffe32fb3 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -238,6 +238,7 @@ function RangePicker( locale, formatList, true, + false, defaultValue, value, onCalendarChange, diff --git a/src/PickerInput/SinglePicker.tsx b/src/PickerInput/SinglePicker.tsx index 98d54c203..e000aae8e 100644 --- a/src/PickerInput/SinglePicker.tsx +++ b/src/PickerInput/SinglePicker.tsx @@ -125,6 +125,7 @@ function Picker( classNames, // Value + order, defaultValue, value, needConfirm, @@ -224,6 +225,7 @@ function Picker( locale, formatList, false, + order, defaultValue, value, onInternalCalendarChange, diff --git a/src/PickerInput/hooks/useRangeValue.ts b/src/PickerInput/hooks/useRangeValue.ts index 8150b81f3..68a855e15 100644 --- a/src/PickerInput/hooks/useRangeValue.ts +++ b/src/PickerInput/hooks/useRangeValue.ts @@ -65,6 +65,13 @@ function useUtil( + dates: DatesType, + generateConfig: GenerateConfig, +) { + return [...dates].sort((a, b) => (generateConfig.isAfter(a, b) ? 1 : -1)) as DatesType; +} + /** * Used for internal value management. * It should always use `mergedValue` in render logic @@ -94,6 +101,12 @@ export function useInnerValue = useEvent( (nextCalendarValues: ValueType) => { - const clone = [...nextCalendarValues] as ValueType; + let clone = [...nextCalendarValues] as ValueType; if (rangeValue) { for (let i = 0; i < 2; i += 1) { clone[i] = clone[i] || null; } + } else if (order) { + clone = orderDates(clone, generateConfig); } // Update merged value @@ -142,7 +157,7 @@ export function useInnerValue { + const triggerOk = () => { if (onOk) { onOk(calendarValue()); } @@ -209,7 +224,7 @@ export default function useRangeValue { const isNullValue = nextValue === null; - const clone = [...(nextValue || submitValue())] as ValueType; + let clone = [...(nextValue || submitValue())] as ValueType; // Fill null value if (isNullValue) { @@ -224,7 +239,7 @@ export default function useRangeValue (generateConfig.isAfter(a, b) ? 1 : -1)); + clone = orderDates(clone, generateConfig); } // Sync `calendarValue` diff --git a/tests/multiple.spec.tsx b/tests/multiple.spec.tsx index d1ab7aab8..26d1b55ed 100644 --- a/tests/multiple.spec.tsx +++ b/tests/multiple.spec.tsx @@ -25,15 +25,26 @@ describe('Picker.Multiple', () => { it('onChange', () => { const onChange = jest.fn(); - const { container } = render(); + const onCalendarChange = jest.fn(); + const { container } = render( + , + ); expect(container.querySelector('.rc-picker-multiple')).toBeTruthy(); openPicker(container); - selectCell(1); + + // Select 3, 1 selectCell(3); - selectCell(5); + selectCell(1); + expect(onCalendarChange).toHaveBeenCalledWith( + expect.anything(), + ['1990-09-01', '1990-09-03'], + expect.anything(), + ); + // Select 5 + selectCell(5); expect(onChange).not.toHaveBeenCalled(); expect(isOpen()).toBeTruthy();