rsuite 5.21.0 → 5.22.1

package/esm/Calendar/Calendar.js

@@ -82,7 +82,7 @@ var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderCell: customRenderCell,
     onMoveForward: handleChange,
     onMoveBackward: handleChange,
-    onChangePageDate: handleChange,
+    onChangeMonth: handleChange,
     onSelect: handleSelect
   }));
 });

package/esm/Calendar/CalendarContainer.d.ts

@@ -39,9 +39,9 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     /** Custom locale */
     locale: CalendarLocale;
     /** Callback after the date has changed */
-    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    onChangeMonth?: (nextPageDate: Date, event: React.MouseEvent) => void;
     /** Callback after the time has changed */
-    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    onChangeTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
     /** Callback after mouse enter other date cell */
     onMouseMove?: (date: Date) => void;
     /** Switch to the callback triggered after the previous month. */

package/esm/Calendar/CalendarContainer.js

@@ -30,8 +30,8 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       limitEndYear = props.limitEndYear,
       locale = props.locale,
-      onChangePageDate = props.onChangePageDate,
-      onChangePageTime = props.onChangePageTime,
+      onChangeMonth = props.onChangeMonth,
+      onChangeTime = props.onChangeTime,
       onMouseMove = props.onMouseMove,
       onMoveBackward = props.onMoveBackward,
       onMoveForward = props.onMoveForward,
@@ -46,7 +46,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -118,10 +118,10 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = pick(rest, calendarOnlyProps);
-  var handleChangePageDate = useCallback(function (date, event) {
+  var handleChangeMonth = useCallback(function (date, event) {
     reset();
-    onChangePageDate === null || onChangePageDate === void 0 ? void 0 : onChangePageDate(date, event);
-  }, [onChangePageDate, reset]);
+    onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
+  }, [onChangeMonth, reset]);
   var contextValue = useMemo(function () {
     return {
       date: calendarDate,
@@ -132,15 +132,15 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
       isoWeek: isoWeek,
       locale: locale,
-      onChangePageDate: handleChangePageDate,
-      onChangePageTime: onChangePageTime,
+      onChangeMonth: handleChangeMonth,
+      onChangeTime: onChangeTime,
       onMouseMove: onMouseMove,
       onSelect: onSelect,
       renderCell: renderCell,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangePageDate, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {
@@ -190,8 +190,8 @@ CalendarContainer.propTypes = {
   isoWeek: PropTypes.bool,
   limitEndYear: PropTypes.number,
   locale: PropTypes.object,
-  onChangePageDate: PropTypes.func,
-  onChangePageTime: PropTypes.func,
+  onChangeMonth: PropTypes.func,
+  onChangeTime: PropTypes.func,
   onMoveBackward: PropTypes.func,
   onMoveForward: PropTypes.func,
   onSelect: PropTypes.func,

package/esm/Calendar/MonthDropdownItem.js

@@ -20,7 +20,7 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useCalendarContext = useCalendarContext(),
       date = _useCalendarContext.date,
-      onSelect = _useCalendarContext.onChangePageDate;
+      onSelect = _useCalendarContext.onChangeMonth;
 
   var handleClick = useCallback(function (event) {
     if (disabled) {

package/esm/Calendar/TimeDropdown.js

@@ -102,7 +102,7 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale = _useCalendarContext.locale,
       format = _useCalendarContext.format,
       date = _useCalendarContext.date,
-      onSelect = _useCalendarContext.onChangePageTime;
+      onSelect = _useCalendarContext.onChangeTime;
 
   var rowRef = useRef(null);
   useEffect(function () {

package/esm/Calendar/types.d.ts

@@ -8,8 +8,8 @@ export interface CalendarInnerContextValue {
     hoverRangeValue?: [Date, Date];
     inSameMonth?: (date: Date) => boolean;
     isoWeek: boolean;
-    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
-    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    onChangeMonth?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    onChangeTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;

package/esm/DatePicker/DatePicker.js

@@ -10,6 +10,8 @@ import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
 import useCalendarDate from '../Calendar/useCalendarDate';
 import Toolbar from './Toolbar';
+import Stack from '../Stack';
+import PredefinedRanges from './PredefinedRanges';
 import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
@@ -130,7 +132,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    *  A callback triggered when the time on the calendar changes.
    */
 
-  var handleChangePageTime = useCallback(function (nextPageTime) {
+  var handleChangeTime = useCallback(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   }, [handleDateChange, setCalendarDate]);
@@ -228,7 +230,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    *  A callback triggered when the date on the calendar changes.
    */
 
-  var handleChangePageDate = useCallback(function (nextPageDate, event) {
+  var handleChangeMonth = useCallback(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
 
@@ -330,10 +332,16 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect: handleSelect,
     onToggleMonthDropdown: onToggleMonthDropdown,
     onToggleTimeDropdown: onToggleTimeDropdown,
-    onChangePageDate: handleChangePageDate,
-    onChangePageTime: handleChangePageTime,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: handleChangeTime,
     onToggleMeridian: handleToggleMeridian
   }));
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+  })) || [];
 
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
@@ -350,16 +358,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlayRef, speakerRef),
       style: styles,
       target: triggerRef
-    }, calendar, /*#__PURE__*/React.createElement(Toolbar, {
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "flex-start"
+    }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('date-predefined'),
+      ranges: sideRanges,
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledToolbarHandle,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, calendar, /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
-      ranges: ranges,
+      ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: disabledToolbarHandle,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
-    }));
+    }))));
   };
 
   var hasValue = !!value;

package/esm/DatePicker/types.d.ts

@@ -4,6 +4,7 @@ export interface RangeType<T> {
     label: ReactNode;
     closeOverlay?: boolean;
     value: T | ((value: T) => T);
+    placement?: 'bottom' | 'left';
 }
 export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
     value: T;

package/esm/DateRangePicker/Calendar.d.ts

@@ -14,11 +14,11 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
-    onChangeCalendarDate?: (index: number, date: Date) => void;
+    onChangeCalendarMonth?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
     onToggleMeridian: (index: number, event: React.MouseEvent) => void;
+    onSelect?: (index: number, date: Date, event: React.SyntheticEvent) => void;
     onMouseMove?: (date: Date) => void;
-    onSelect?: (date: Date, event: React.SyntheticEvent) => void;
     showWeekNumbers?: boolean;
     value?: [] | [Date] | [Date, Date];
 }

package/esm/DateRangePicker/Calendar.js

@@ -16,23 +16,27 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$index = props.index,
       index = _props$index === void 0 ? 0 : _props$index,
       limitEndYear = props.limitEndYear,
-      onChangeCalendarDate = props.onChangeCalendarDate,
+      onChangeCalendarMonth = props.onChangeCalendarMonth,
       onChangeCalendarTime = props.onChangeCalendarTime,
       onToggleMeridian = props.onToggleMeridian,
+      onSelect = props.onSelect,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
 
   var onMoveForward = useCallback(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
   var onMoveBackward = useCallback(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageDate = useCallback(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageTime = useCallback(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleSelect = useCallback(function (date, event) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
+  }, [index, onSelect]);
+  var handleChangeMonth = useCallback(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleChangeTime = useCallback(function (nextPageDate) {
     onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
   var handleToggleMeridian = useCallback(function (event) {
@@ -60,11 +64,12 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,
-    onChangePageDate: handleChangePageDate,
-    onChangePageTime: handleChangePageTime,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: handleChangeTime,
     onMoveBackward: handleMoveBackward,
     onMoveForward: handleMoveForward,
     onToggleMeridian: handleToggleMeridian,
+    onSelect: handleSelect,
     calendarDate: getCalendarDate(),
     ref: ref
   }));
@@ -82,6 +87,6 @@ Calendar.propTypes = {
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,
   onMouseMove: PropTypes.func,
-  onChangeCalendarDate: PropTypes.func
+  onChangeCalendarMonth: PropTypes.func
 };
 export default Calendar;

package/esm/DateRangePicker/DateRangePicker.js

@@ -13,10 +13,10 @@ import PredefinedRanges from '../DatePicker/PredefinedRanges';
 import Stack from '../Stack';
 import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { createChainedFunction, DATERANGE_DISABLED_TARGET, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
-import { addMonths, compareAsc, isSameMonth, startOfDay, endOfDay } from '../utils/dateUtils';
+import { addMonths, compareAsc, isSameMonth, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, reverseDateRangeOmitTime, getReversedTimeMeridian } from '../utils/dateUtils';
 import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
-import { getCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
+import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
 var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
 
@@ -116,8 +116,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = useState(getCalendarDate({
-    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
+  var _useState3 = useState(getSafeCalendarDate({
+    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
       calendarDate = _useState3[0],
       setCalendarDate = _useState3[1];
@@ -133,37 +133,47 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
   var selectRangeValueRef = useRef(null);
+  /**
+   * Get the time on the calendar.
+   */
+
+  var getCalendarDatetime = useCallback(function (calendarKey) {
+    var index = calendarKey === 'start' ? 0 : 1;
+    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
+  }, [calendarDate, defaultCalendarValue]);
   /**
    * Call this function to update the calendar panel rendering benchmark value.
    * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
    */
 
-  var updateCalendarDateRange = useCallback(function (selectedDate, calendarKey) {
-    var nextValue = selectedDate;
-    var shouldRenderTime = DateUtils.shouldRenderTime,
-        getHours = DateUtils.getHours,
-        getMinutes = DateUtils.getMinutes,
-        getSeconds = DateUtils.getSeconds,
-        set = DateUtils.set;
-
-    if (shouldRenderTime(formatStr) && calendarKey === undefined && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.length) === 1) {
-      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[1]);
-      var _startDate = selectedDate[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.
-
-      var _endDate = set(addMonths(_startDate, 1), {
-        hours: getHours(calendarEndDate),
-        minutes: getMinutes(calendarEndDate),
-        seconds: getSeconds(calendarEndDate)
+  var updateCalendarDateRange = useCallback(function (_ref3) {
+    var dateRange = _ref3.dateRange,
+        calendarKey = _ref3.calendarKey,
+        eventName = _ref3.eventName;
+    var nextValue = dateRange; // The time should remain the same when the dates in the date range are changed.
+
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+      var _startDate = copyTime({
+        from: getCalendarDatetime('start'),
+        to: dateRange[0]
+      });
+
+      var _endDate = copyTime({
+        from: getCalendarDatetime('end'),
+        to: dateRange.length === 1 ? addMonths(_startDate, 1) : dateRange[1]
       });
 
       nextValue = [_startDate, _endDate];
+    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
+      // Make the calendar render the value of defaultCalendarValue after clearing the value.
+      nextValue = defaultCalendarValue;
     }
 
-    setCalendarDate(getCalendarDate({
+    setCalendarDate(getSafeCalendarDate({
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [formatStr, defaultCalendarValue, getCalendarDatetime]); // if valueProp changed then update selectValue/hoverValue
 
   useEffect(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -241,8 +251,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return null;
     }
 
-    if (DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
-      hoverValues.reverse();
+    if (isAfter(hoverValues[0], hoverValues[1])) {
+      hoverValues = reverseDateRangeOmitTime(hoverValues);
     }
 
     return hoverValues;
@@ -299,7 +309,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * Callback for selecting a date cell in the calendar grid
    */
 
-  var handleSelectDate = useCallback(function (date, event) {
+  var handleSelectDate = useCallback(function (index, date, event) {
+    var calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = isNil(hoverRangeValue); // in `oneTap` mode
@@ -327,19 +338,38 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
-    } // If user have completed the selection, then sort
+    }
+
+    if (nextSelectDates.length === 2) {
+      // If user have completed the selection, then sort the selected dates.
+      if (isAfter(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates = reverseDateRangeOmitTime(nextSelectDates);
+      }
 
+      if (shouldRenderTime(formatStr)) {
+        nextSelectDates = [copyTime({
+          from: getCalendarDatetime('start'),
+          to: nextSelectDates[0]
+        }), copyTime({
+          from: getCalendarDatetime('end'),
+          to: nextSelectDates[1]
+        })];
+      }
 
-    if (nextSelectDates.length === 2 && DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
-      nextSelectDates.reverse();
+      setHoverDateRange(nextSelectDates);
+    } else {
+      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
-    updateCalendarDateRange(nextSelectDates);
+    updateCalendarDateRange({
+      dateRange: nextSelectDates,
+      calendarKey: calendarKey,
+      eventName: 'changeDate'
+    });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -351,39 +381,48 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var updateSingleCalendarDate = useCallback(function (index, date) {
+  var updateSingleCalendarMonth = useCallback(function (index, date) {
+    var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate,
+      calendarKey: calendarKey,
+      eventName: 'changeMonth'
+    });
   }, [calendarDate, updateCalendarDateRange]);
   var updateSingleCalendarTime = useCallback(function (index, date) {
+    var calendarKey = index === 0 ? 'start' : 'end';
+    var nextCalendarDate = Array.from(calendarDate);
+    nextCalendarDate[index] = date;
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate,
+      calendarKey: calendarKey,
+      eventName: 'changeTime'
+    });
     setSelectedDates(function (prev) {
-      var next = [].concat(prev);
-      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
-
-      if (next[index]) {
-        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());
-      }
+      var next = [].concat(prev); // if next[index] is not empty, only update the time after aligning the year, month and day
 
-      next[index] = clonedDate;
+      next[index] = next[index] ? copyTime({
+        from: date,
+        to: next[index]
+      }) : new Date(date.valueOf());
       return next;
     });
-    updateSingleCalendarDate(index, date);
-  }, [updateSingleCalendarDate]);
+  }, [calendarDate, updateCalendarDateRange]);
   /**
    * The callback triggered when PM/AM is switched.
    */
 
   var handleToggleMeridian = useCallback(function (index) {
-    var next = Array.from(calendarDate);
-    var clonedDate = new Date(next[index].valueOf());
-    var hours = DateUtils.getHours(clonedDate);
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    next[index] = DateUtils.setHours(clonedDate, nextHours);
-    setCalendarDate(next); // If the value already exists, update the value again.
+    var nextCalendarDate = Array.from(calendarDate);
+    nextCalendarDate[index] = getReversedTimeMeridian(nextCalendarDate[index]);
+    setCalendarDate(nextCalendarDate); // If the value already exists, update the value again.
 
     if (selectedDates.length === 2) {
-      setSelectedDates(next);
+      var nextSelectedDates = Array.from(selectedDates);
+      nextSelectedDates[index] = getReversedTimeMeridian(nextSelectedDates[index]);
+      setSelectedDates(nextSelectedDates);
     }
   }, [calendarDate, selectedDates]);
   /**
@@ -395,7 +434,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       closeOverlay = false;
     }
 
-    updateCalendarDateRange(value);
+    updateCalendarDateRange({
+      dateRange: value
+    });
 
     if (closeOverlay) {
       handleValueUpdate(event, value, closeOverlay);
@@ -411,7 +452,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = useCallback(function (event) {
-    updateCalendarDateRange(null);
+    updateCalendarDateRange({
+      dateRange: null
+    });
     handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDateRange]);
   /**
@@ -448,7 +491,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
-    updateCalendarDateRange(selectValue);
+    updateCalendarDateRange({
+      dateRange: selectValue
+    });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [character, rangeFormatStr, updateCalendarDateRange]);
   /**
@@ -471,13 +516,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       nextCalendarDate = [_startDate2, isSameMonth(_startDate2, endData) ? addMonths(endData, 1) : endData];
     } else {
       // Reset the date on the calendar to the default date
-      nextCalendarDate = getCalendarDate({
+      nextCalendarDate = getSafeCalendarDate({
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
     }
 
     setSelectedDates(value !== null && value !== void 0 ? value : []);
-    updateCalendarDateRange(nextCalendarDate);
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate
+    });
   }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
   var handleEntered = useCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -566,7 +613,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarDate: updateSingleCalendarDate,
+      onChangeCalendarMonth: updateSingleCalendarMonth,
       onChangeCalendarTime: updateSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,

package/esm/DateRangePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { DateRange } from './types';
-export declare function getCalendarDate({ value, calendarKey }: {
+export declare function getSafeCalendarDate({ value, calendarKey }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
 }): DateRange;

package/esm/DateRangePicker/utils.js

@@ -1,5 +1,5 @@
-import { addMonths, getMonth, isSameDay, shouldRenderTime, isSameSecond, startOfMonth, endOfMonth, startOfISOWeek, endOfISOWeek, startOfWeek, endOfWeek } from '../utils/dateUtils';
-export function getCalendarDate(_ref) {
+import { addMonths, isSameDay, shouldRenderTime, isSameSecond, startOfMonth, endOfMonth, startOfISOWeek, endOfISOWeek, startOfWeek, endOfWeek, differenceInCalendarMonths, copyTime } from '../utils/dateUtils';
+export function getSafeCalendarDate(_ref) {
   var _value;
 
   var value = _ref.value,
@@ -9,13 +9,18 @@ export function getCalendarDate(_ref) {
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
 
   if (value[0] && value[1]) {
-    var startMonth = getMonth(value[0]);
-    var endMonth = getMonth(value[1]);
+    var diffMonth = differenceInCalendarMonths(value[1], value[0]);
 
     if (calendarKey === 'start') {
-      return [value[0], startMonth >= endMonth ? addMonths(value[0], 1) : value[1]];
+      return [value[0], diffMonth <= 0 ? copyTime({
+        from: value[1],
+        to: addMonths(value[0], 1)
+      }) : value[1]];
     } else if (calendarKey === 'end') {
-      return [startMonth >= endMonth ? addMonths(value[1], -1) : value[0], value[1]];
+      return [diffMonth <= 0 ? copyTime({
+        from: value[0],
+        to: addMonths(value[1], -1)
+      }) : value[0], value[1]];
     } // If only the start date
 
   } else if (value[0]) {

package/esm/utils/dateUtils.d.ts

@@ -36,6 +36,7 @@ export { default as subDays } from 'date-fns/subDays';
 export { default as isMatch } from 'date-fns/isMatch';
 export { default as isValid } from 'date-fns/isValid';
 export { default as set } from 'date-fns/set';
+export { default as differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
 export declare type CalendarOnlyPropsType = 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'hideHours' | 'hideMinutes' | 'hideSeconds';
 export declare const calendarOnlyProps: CalendarOnlyPropsType[];
 /**
@@ -56,3 +57,18 @@ export declare const shouldOnlyRenderTime: (format: string) => boolean;
  */
 export declare function getMonthView(monthDate: Date, isoWeek: boolean): Date[];
 export declare function getDateMask(formatStr: string): (string | RegExp)[];
+/**
+ * Copy the time of one date to another
+ */
+export declare function copyTime({ from, to }: {
+    from: Date;
+    to: Date;
+}): Date;
+/**
+ * Swap two dates without swapping the time.
+ */
+export declare function reverseDateRangeOmitTime(dateRange: [Date, Date]): [Date, Date];
+/**
+ * Get the time with AM and PM reversed.
+ */
+export declare const getReversedTimeMeridian: (date: Date) => Date;