rsuite 5.22.0 → 5.22.1

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [5.22.1](https://github.com/rsuite/rsuite/compare/v5.22.0...v5.22.1) (2022-11-11)
+
+### Bug Fixes
+
+- **DateRangePicker:** fix time on calendar changing with date change ([#2884](https://github.com/rsuite/rsuite/issues/2884)) ([77529af](https://github.com/rsuite/rsuite/commit/77529af661eac3abec994f146c3c7262a85f2009))
+
 # [5.22.0](https://github.com/rsuite/rsuite/compare/v5.21.0...v5.22.0) (2022-11-03)
 
 ### Bug Fixes

package/cjs/Calendar/Calendar.js

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

package/cjs/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/cjs/Calendar/CalendarContainer.js

@@ -53,8 +53,8 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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,
@@ -69,7 +69,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -141,10 +141,10 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = (0, _pick.default)(rest, _dateUtils.calendarOnlyProps);
-  var handleChangePageDate = (0, _react.useCallback)(function (date, event) {
+  var handleChangeMonth = (0, _react.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 = (0, _react.useMemo)(function () {
     return {
       date: calendarDate,
@@ -155,15 +155,15 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
@@ -214,8 +214,8 @@ CalendarContainer.propTypes = {
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
   locale: _propTypes.default.object,
-  onChangePageDate: _propTypes.default.func,
-  onChangePageTime: _propTypes.default.func,
+  onChangeMonth: _propTypes.default.func,
+  onChangeTime: _propTypes.default.func,
   onMoveBackward: _propTypes.default.func,
   onMoveForward: _propTypes.default.func,
   onSelect: _propTypes.default.func,

package/cjs/Calendar/MonthDropdownItem.js

@@ -36,7 +36,7 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
 
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
       date = _useCalendarContext.date,
-      onSelect = _useCalendarContext.onChangePageDate;
+      onSelect = _useCalendarContext.onChangeMonth;
 
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) {

package/cjs/Calendar/TimeDropdown.js

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

package/cjs/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/cjs/DatePicker/DatePicker.js

@@ -158,7 +158,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    *  A callback triggered when the time on the calendar changes.
    */
 
-  var handleChangePageTime = (0, _react.useCallback)(function (nextPageTime) {
+  var handleChangeTime = (0, _react.useCallback)(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   }, [handleDateChange, setCalendarDate]);
@@ -259,7 +259,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    *  A callback triggered when the date on the calendar changes.
    */
 
-  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {
+  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
 
@@ -364,8 +364,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelect: handleSelect,
     onToggleMonthDropdown: onToggleMonthDropdown,
     onToggleTimeDropdown: onToggleTimeDropdown,
-    onChangePageDate: handleChangePageDate,
-    onChangePageTime: handleChangePageTime,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: handleChangeTime,
     onToggleMeridian: handleToggleMeridian
   }));
 

package/cjs/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/cjs/DateRangePicker/Calendar.js

@@ -32,22 +32,26 @@ var Calendar = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
   var onMoveForward = (0, _react.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 = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleSelect = (0, _react.useCallback)(function (date, event) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
+  }, [index, onSelect]);
+  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleChangeTime = (0, _react.useCallback)(function (nextPageDate) {
     onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
   var handleToggleMeridian = (0, _react.useCallback)(function (event) {
@@ -75,11 +79,12 @@ var Calendar = /*#__PURE__*/_react.default.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
   }));
@@ -98,7 +103,7 @@ Calendar.propTypes = {
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onMouseMove: _propTypes.default.func,
-  onChangeCalendarDate: _propTypes.default.func
+  onChangeCalendarMonth: _propTypes.default.func
 };
 var _default = Calendar;
 exports.default = _default;

package/cjs/DateRangePicker/DateRangePicker.js

@@ -144,8 +144,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({
-    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
+  var _useState3 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
+    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
       calendarDate = _useState3[0],
       setCalendarDate = _useState3[1];
@@ -162,43 +162,46 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var selectRangeValueRef = (0, _react.useRef)(null);
   /**
-   * Get the time on the second calendar as the end of the date range.
+   * Get the time on the calendar.
    */
 
-  var getCalendarEndDatetime = (0, _react.useCallback)(function (date) {
-    var getHours = _utils.DateUtils.getHours,
-        getMinutes = _utils.DateUtils.getMinutes,
-        getSeconds = _utils.DateUtils.getSeconds,
-        set = _utils.DateUtils.set;
-    var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[1]);
-    return set(date, {
-      hours: getHours(calendarEndDate),
-      minutes: getMinutes(calendarEndDate),
-      seconds: getSeconds(calendarEndDate)
-    });
+  var getCalendarDatetime = (0, _react.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 = (0, _react.useCallback)(function (selectedDate, calendarKey) {
-    var nextValue = selectedDate;
-    var shouldRenderTime = _utils.DateUtils.shouldRenderTime;
+  var updateCalendarDateRange = (0, _react.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) && calendarKey === undefined && selectedDate !== null && selectedDate !== void 0 && selectedDate.length) {
-      var _startDate = selectedDate[0];
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+      var _startDate = (0, _dateUtils.copyTime)({
+        from: getCalendarDatetime('start'),
+        to: dateRange[0]
+      });
 
-      var _endDate = getCalendarEndDatetime((0, _dateUtils.addMonths)(_startDate, 1));
+      var _endDate = (0, _dateUtils.copyTime)({
+        from: getCalendarDatetime('end'),
+        to: dateRange.length === 1 ? (0, _dateUtils.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((0, _utils2.getCalendarDate)({
+    setCalendarDate((0, _utils2.getSafeCalendarDate)({
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [getCalendarEndDatetime, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [formatStr, defaultCalendarValue, getCalendarDatetime]); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.useEffect)(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -276,8 +279,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return null;
     }
 
-    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
-      hoverValues.reverse();
+    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {
+      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);
     }
 
     return hoverValues;
@@ -334,7 +337,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * Callback for selecting a date cell in the calendar grid
    */
 
-  var handleSelectDate = (0, _react.useCallback)(function (date, event) {
+  var handleSelectDate = (0, _react.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 = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
@@ -364,17 +368,20 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       }
     }
 
-    var shouldRenderTime = _utils.DateUtils.shouldRenderTime,
-        isAfter = _utils.DateUtils.isAfter;
-
     if (nextSelectDates.length === 2) {
       // If user have completed the selection, then sort the selected dates.
-      if (isAfter(nextSelectDates[0], nextSelectDates[1])) {
-        nextSelectDates.reverse();
+      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);
       }
 
-      if (shouldRenderTime(formatStr)) {
-        nextSelectDates[1] = getCalendarEndDatetime(nextSelectDates[1]);
+      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {
+        nextSelectDates = [(0, _dateUtils.copyTime)({
+          from: getCalendarDatetime('start'),
+          to: nextSelectDates[0]
+        }), (0, _dateUtils.copyTime)({
+          from: getCalendarDatetime('end'),
+          to: nextSelectDates[1]
+        })];
       }
 
       setHoverDateRange(nextSelectDates);
@@ -383,10 +390,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     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;
-  }, [formatStr, getCalendarEndDatetime, 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.
@@ -398,41 +409,48 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {
+  var updateSingleCalendarMonth = (0, _react.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 = (0, _react.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
+      var next = [].concat(prev); // 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());
-      }
-
-      next[index] = clonedDate;
+      next[index] = next[index] ? (0, _dateUtils.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 = (0, _react.useCallback)(function (index) {
-    var next = Array.from(calendarDate);
-    var clonedDate = new Date(next[index].valueOf());
-
-    var hours = _utils.DateUtils.getHours(clonedDate);
-
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);
-    setCalendarDate(next); // If the value already exists, update the value again.
+    var nextCalendarDate = Array.from(calendarDate);
+    nextCalendarDate[index] = (0, _dateUtils.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] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);
+      setSelectedDates(nextSelectedDates);
     }
   }, [calendarDate, selectedDates]);
   /**
@@ -444,7 +462,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       closeOverlay = false;
     }
 
-    updateCalendarDateRange(value);
+    updateCalendarDateRange({
+      dateRange: value
+    });
 
     if (closeOverlay) {
       handleValueUpdate(event, value, closeOverlay);
@@ -460,7 +480,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    updateCalendarDateRange(null);
+    updateCalendarDateRange({
+      dateRange: null
+    });
     handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDateRange]);
   /**
@@ -497,7 +519,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
-    updateCalendarDateRange(selectValue);
+    updateCalendarDateRange({
+      dateRange: selectValue
+    });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [character, rangeFormatStr, updateCalendarDateRange]);
   /**
@@ -520,13 +544,15 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
       // Reset the date on the calendar to the default date
-      nextCalendarDate = (0, _utils2.getCalendarDate)({
+      nextCalendarDate = (0, _utils2.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 = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -613,7 +639,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarDate: updateSingleCalendarDate,
+      onChangeCalendarMonth: updateSingleCalendarMonth,
       onChangeCalendarTime: updateSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,

package/cjs/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/cjs/DateRangePicker/utils.js

@@ -1,12 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getCalendarDate = getCalendarDate;
+exports.getSafeCalendarDate = getSafeCalendarDate;
 exports.getWeekHoverRange = exports.getMonthHoverRange = exports.isSameRange = void 0;
 
 var _dateUtils = require("../utils/dateUtils");
 
-function getCalendarDate(_ref) {
+function getSafeCalendarDate(_ref) {
   var _value;
 
   var value = _ref.value,
@@ -16,13 +16,18 @@ function getCalendarDate(_ref) {
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
 
   if (value[0] && value[1]) {
-    var startMonth = (0, _dateUtils.getMonth)(value[0]);
-    var endMonth = (0, _dateUtils.getMonth)(value[1]);
+    var diffMonth = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);
 
     if (calendarKey === 'start') {
-      return [value[0], startMonth >= endMonth ? (0, _dateUtils.addMonths)(value[0], 1) : value[1]];
+      return [value[0], diffMonth <= 0 ? (0, _dateUtils.copyTime)({
+        from: value[1],
+        to: (0, _dateUtils.addMonths)(value[0], 1)
+      }) : value[1]];
     } else if (calendarKey === 'end') {
-      return [startMonth >= endMonth ? (0, _dateUtils.addMonths)(value[1], -1) : value[0], value[1]];
+      return [diffMonth <= 0 ? (0, _dateUtils.copyTime)({
+        from: value[0],
+        to: (0, _dateUtils.addMonths)(value[1], -1)
+      }) : value[0], value[1]];
     } // If only the start date
 
   } else if (value[0]) {

package/cjs/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;