rsuite 5.2.1 → 5.3.0

package/cjs/DateRangePicker/Calendar.js

@@ -21,6 +21,14 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../utils");
 
+/**
+ * Omit the time in the date, which is used to compare and judge the date.
+ * eg: isAfter/isBefore
+ */
+function omitTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -34,10 +42,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
+      onToggleMeridian = props.onToggleMeridian,
       showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -54,8 +63,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarTime(index, nextPageDate);
+    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = (0, _react.useCallback)(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -75,22 +87,30 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = (0, _react.useCallback)(function () {
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = (0, _react.useCallback)(function () {
-    if (showOneCalendar) return false;
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
+    // If only one calendar is displayed, do not disable
+    if (showOneCalendar) {
+      return false;
+    } // Do not disable the Forward button on the second calendar.
+
 
     if (index === 1) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
@@ -126,6 +146,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent } from '../Picker';
-import { DisabledDateFunction, RangeType, ValueType } from './types';
-export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
+import { DisabledDateFunction, RangeType, DateRange } from './types';
+export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null> {
     /** Configure shortcut options */
     ranges?: RangeType[];
     /** Format date */
     format?: string;
     /** The date range that will be selected when you click on the date */
-    hoverRange?: 'week' | 'month' | ((date: Date) => ValueType);
+    hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
     /** Whether to click once on selected date range，Can be used with hoverRange */
     oneTap?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
@@ -19,8 +19,10 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     showWeekNumbers?: boolean;
     /** Show only one calendar select */
     showOneCalendar?: boolean;
+    /** Meridian format */
+    showMeridian?: boolean;
     /** Set default date for calendar */
-    defaultCalendarValue?: ValueType;
+    defaultCalendarValue?: DateRange;
     /** The character that separates two dates */
     character?: string;
     /** Disabled date */
@@ -28,11 +30,11 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Called when the option is selected */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: ValueType, event: React.SyntheticEvent) => void;
+    onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */
-    renderValue?: (value: ValueType, format: string) => React.ReactNode;
+    renderValue?: (value: DateRange, format: string) => React.ReactNode;
 }
 export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -13,7 +13,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
@@ -42,7 +42,7 @@ var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 var _utils2 = require("./utils");
 
 var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _ref, _merge;
+  var _ref, _ref2, _merge;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -62,7 +62,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _props$format = props.format,
       formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
       hoverRange = props.hoverRange,
-      isoWeek = props.isoWeek,
+      _props$isoWeek = props.isoWeek,
+      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       _props$limitEndYear = props.limitEndYear,
       limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
       overrideLocale = props.locale,
@@ -78,6 +79,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _props$showOneCalenda = props.showOneCalendar,
       showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
       showWeekNumbers = props.showWeekNumbers,
+      showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
       valueProp = props.value,
@@ -90,7 +92,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -103,7 +105,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
       value = _useControlled[0],
       setValue = _useControlled[1];
   /**
@@ -125,17 +127,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var _useState = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-      selectValue = _useState[0],
-      setSelectValue = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
+      selectedDates = _useState[0],
+      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
 
-  var _useState2 = (0, _react.useState)([]),
-      hoverValue = _useState2[0],
-      setHoverValue = _useState2[1]; // The displayed calendar panel is rendered based on this value.
+  var _useState2 = (0, _react.useState)(null),
+      hoverDateRange = _useState2[0],
+      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
   var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({
-    value: valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue
+    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
       calendarDate = _useState3[0],
       setCalendarDate = _useState3[1];
@@ -163,18 +165,18 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }, []); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.useEffect)(function () {
-    setSelectValue(valueProp !== null && valueProp !== void 0 ? valueProp : []);
-    setHoverValue(valueProp !== null && valueProp !== void 0 ? valueProp : []);
+    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
+    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
   var _useState5 = (0, _react.useState)(false),
       isPickerToggleActive = _useState5[0],
       setPickerToggleActive = _useState5[1];
 
-  var rootRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var triggerRef = (0, _react.useRef)(null);
   var handleCloseDropdown = (0, _react.useCallback)(function () {
     var _triggerRef$current, _triggerRef$current$c;
 
@@ -187,14 +189,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rootRef: rootRef
   });
   var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {
-    var _nextValue, _nextValue2;
+    var _nextValue$, _nextValue$2;
 
-    if (nextValue === void 0) {
-      nextValue = value;
-    }
-
-    var startDate = (_nextValue = nextValue) === null || _nextValue === void 0 ? void 0 : _nextValue[0];
-    var endDate = (_nextValue2 = nextValue) === null || _nextValue2 === void 0 ? void 0 : _nextValue2[1];
+    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;
+    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;
 
     if (startDate && endDate) {
       var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);
@@ -219,29 +217,27 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var getHoverRangeValue = (0, _react.useCallback)(function (date) {
-    if (!hoverRange) {
-      return [];
-    }
-
-    var hoverRangeFunc = hoverRange;
+    function getHoverRangeFunc() {
+      if (hoverRange === 'week') {
+        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
+      } else if (hoverRange === 'month') {
+        return _utils2.getMonthHoverRange;
+      }
 
-    if (hoverRange === 'week') {
-      hoverRangeFunc = (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
+      return hoverRange;
     }
 
-    if (hoverRangeFunc === 'month') {
-      hoverRangeFunc = _utils2.getMonthHoverRange;
-    }
+    var hoverRangeFunc = getHoverRangeFunc();
 
-    if (typeof hoverRangeFunc !== 'function') {
-      return [];
+    if ((0, _isNil.default)(hoverRangeFunc)) {
+      return null;
     }
 
     var hoverValues = hoverRangeFunc(date);
     var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
 
     if (!isHoverRangeValid) {
-      return [];
+      return null;
     }
 
     if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
@@ -250,13 +246,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     return hoverValues;
   }, [hoverRange, isoWeek]);
-  var handleValueUpdate = (0, _react.useCallback)(function (event, nextSelectValue, closeOverlay) {
+  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
 
-    var nextValue = !(0, _isUndefined.default)(nextSelectValue) ? nextSelectValue : selectValue;
-    setSelectValue(nextValue || []);
+    // If nextValue is null, it means that the user is erasing the selected dates.
+    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);
 
     if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {
       setValue(nextValue);
@@ -267,40 +263,41 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [formatStr, handleCloseDropdown, onChange, selectValue, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, selectedDates, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
    */
 
   var handleMouseMove = (0, _react.useCallback)(function (date) {
-    var hoverRangeValue = getHoverRangeValue(date); // After the first click
+    var nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,
+    // it means there's already one selected date
+    // and waiting for user to select the second date to complete the selection.
 
     if (!hasDoneSelect.current) {
-      // If hoverRange is set, you need to change the value of hoverValue according to the rules
-      if (hoverRange) {
-        var nextHoverValue = [selectRangeValueRef.current[0], hoverRangeValue[1]];
+      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
+      if (!(0, _isNil.default)(nextHoverDateRange)) {
+        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
 
-        if (_utils.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
-          nextHoverValue[0] = hoverRangeValue[0];
-          nextHoverValue[1] = selectRangeValueRef.current[1];
+        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
+          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
 
-        setSelectValue(nextHoverValue);
+        setSelectedDates(nextSelectedDates);
       } else {
-        setHoverValue(function (prevHoverValue) {
-          return [prevHoverValue[0], date];
+        setHoverDateRange(function (prevHoverValue) {
+          return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];
         });
-      } // Before the first click, if hoverRangeValue has a value, hoverValue needs to be updated
+      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated
 
-    } else if (hoverRange && hoverRangeValue.length) {
-      setHoverValue(hoverRangeValue);
+    } else if (!(0, _isNil.default)(nextHoverDateRange)) {
+      setHoverDateRange(nextHoverDateRange);
     }
   }, [getHoverRangeValue, hoverRange]);
-  var handleSelectValueChange = (0, _react.useCallback)(function (date, event) {
-    var nextSelectValue = Array.from(hoverValue);
+  var handleSelectDate = (0, _react.useCallback)(function (date, event) {
+    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
-    var noHoverRangeValid = hoverRangeValue.length !== 2; // in `oneTap` mode
+    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
 
     if (hasDoneSelect.current && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);
@@ -312,32 +309,32 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (noHoverRangeValid) {
       // start select
       if (hasDoneSelect.current) {
-        nextSelectValue = [date];
+        nextSelectDates = [date];
       } else {
         // finish select
-        nextSelectValue[1] = date;
+        nextSelectDates[1] = date;
       }
     } else {
       if (!hasDoneSelect.current) {
-        nextSelectValue = selectValue;
+        nextSelectDates = selectedDates;
         selectRangeValueRef.current = null;
       } else {
-        nextSelectValue = hoverRangeValue;
+        nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
     } // If user have completed the selection, then sort
 
 
-    if (nextSelectValue.length === 2 && _utils.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
-      nextSelectValue.reverse();
+    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
+      nextSelectDates.reverse();
     }
 
-    setHoverValue(nextSelectValue);
-    setSelectValue(nextSelectValue);
-    updateCalendarDate(nextSelectValue);
+    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : null);
+    setSelectedDates(nextSelectDates);
+    updateCalendarDate(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverValue, onSelect, oneTap, selectValue, updateCalendarDate]);
+  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -345,19 +342,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   (0, _react.useEffect)(function () {
-    var _selectValue$length;
-
-    var selectValueLength = (_selectValue$length = selectValue === null || selectValue === void 0 ? void 0 : selectValue.length) !== null && _selectValue$length !== void 0 ? _selectValue$length : 0;
+    var selectValueLength = selectedDates.length;
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
-    doneSelected && setHoverValue([]);
-  }, [selectValue]);
+    doneSelected && setHoverDateRange(null);
+  }, [selectedDates]);
   var handleChangeCalendarDate = (0, _react.useCallback)(function (index, date) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
     updateCalendarDate(nextCalendarDate);
   }, [calendarDate, updateCalendarDate]);
   var handleChangeCalendarTime = (0, _react.useCallback)(function (index, date) {
-    setSelectValue(function (prev) {
+    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
 
@@ -370,20 +365,42 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * 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.
+
+    if (selectedDates.length === 2) {
+      setSelectedDates(next);
+    }
+  }, [calendarDate, selectedDates]);
   /**
    * Toolbar operation callback function
    */
 
   var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {
+    if (closeOverlay === void 0) {
+      closeOverlay = false;
+    }
+
     handleValueUpdate(event, value, closeOverlay);
   }, [handleValueUpdate]);
   var handleOK = (0, _react.useCallback)(function (event) {
-    handleValueUpdate(event);
-    onOk === null || onOk === void 0 ? void 0 : onOk(selectValue, event);
-  }, [handleValueUpdate, onOk, selectValue]);
+    handleValueUpdate(event, selectedDates);
+    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
+  }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    updateCalendarDate();
-    handleValueUpdate(event, []);
+    updateCalendarDate(null);
+    handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDate]);
   /**
    * Callback after the input box value is changed.
@@ -412,13 +429,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return;
     }
 
-    if (disabledDate(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
+    if (isDateDisabled(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
       setInputState('Error');
       return;
     }
 
-    setHoverValue(selectValue);
-    setSelectValue(selectValue);
+    setHoverDateRange(selectValue);
+    setSelectedDates(selectValue);
     updateCalendarDate(selectValue);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [character, rangeFormatStr, updateCalendarDate]);
@@ -428,11 +445,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var handleInputPressEnd = (0, _react.useCallback)(function (event) {
     if (inputState === 'Typing') {
-      handleValueUpdate(event, selectValue);
+      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);
     }
 
     setInputState('Initial');
-  }, [handleValueUpdate, selectValue, inputState]);
+  }, [handleValueUpdate, selectedDates, inputState]);
   var handleEnter = (0, _react.useCallback)(function () {
     var nextCalendarDate;
 
@@ -442,13 +459,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
       nextCalendarDate = (0, _utils2.getCalendarDate)({
-        value: defaultCalendarValue
+        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
     }
 
-    setSelectValue(value);
+    setSelectedDates(value !== null && value !== void 0 ? value : []);
     updateCalendarDate(nextCalendarDate);
-  }, [defaultCalendarValue, updateCalendarDate, setSelectValue, value]);
+  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);
   var handleEntered = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setPickerToggleActive(true);
@@ -458,17 +475,16 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasDoneSelect.current = true;
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
-  var disabledDate = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {
-    return disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target);
+  var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {
+    var _disabledDateProp;
+
+    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
   }, [disabledDateProp]);
   var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {
-    var selectStartDate = selectValue[0],
-        selectEndDate = selectValue[1];
-    var nextSelectValue = [selectStartDate, selectEndDate]; // If the date is between the start and the end
+    // If the date is between the start and the end
     // the button is disabled
-
     while (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
-      if (disabledDate(start, nextSelectValue, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
         return true;
       }
 
@@ -476,17 +492,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return false;
-  }, [disabledDate, selectValue]);
+  }, [isDateDisabled, selectedDates]);
   var disabledOkButton = (0, _react.useCallback)(function () {
-    var start = selectValue[0],
-        end = selectValue[1];
+    var start = selectedDates[0],
+        end = selectedDates[1];
 
     if (!start || !end || !hasDoneSelect.current) {
       return true;
     }
 
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectValue]);
+  }, [disabledByBetween, selectedDates]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
       value = [];
@@ -503,8 +519,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
-    return disabledDate(date, values, hasDoneSelect.current, type);
-  }, [disabledDate]);
+    return isDateDisabled(date, values, hasDoneSelect.current, type);
+  }, [isDateDisabled]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -528,17 +544,19 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       calendarDate: calendarDate,
       disabledDate: handleDisabledDate,
       format: formatStr,
-      hoverRangeValue: hoverValue,
+      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
       locale: locale,
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
-      value: selectValue,
+      value: selectedDates,
+      showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange
+      onSelect: handleSelectDate,
+      onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       className: classes,
@@ -551,7 +569,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-content')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header')
-    }, getDisplayString(selectValue)), /*#__PURE__*/_react.default.createElement("div", {
+    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
@@ -559,7 +577,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       index: 1
     }, panelProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
-      calendarDate: selectValue,
+      calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,
       disabledShortcut: disabledShortcutButton,
       hideOkBtn: oneTap,
@@ -569,7 +587,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     })));
   };
 
-  var hasValue = value && value.length > 1;
+  var hasValue = !(0, _isNil.default)(value) && value.length > 1;
 
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
@@ -612,7 +630,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     placement: placement,
     caretComponent: _Calendar.default,
     disabled: disabled
-  }), getDisplayString())));
+  }), getDisplayString(value))));
 });
 
 DateRangePicker.after = disabledDateUtils.after;
@@ -634,11 +652,12 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
-  showWeekNumbers: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
+  showWeekNumbers: _propTypes.default.bool,
+  showMeridian: _propTypes.default.bool,
   showOneCalendar: _propTypes.default.bool
 });
 var _default = DateRangePicker;