rsuite 5.71.0 → 5.73.0

package/esm/DatePicker/DatePicker.js

@@ -3,15 +3,16 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2;
-var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
+var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showMeridiem", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
-import IconCalendar from '@rsuite/icons/legacy/Calendar';
-import IconClockO from '@rsuite/icons/legacy/ClockO';
+import CalendarIcon from '@rsuite/icons/Calendar';
+import TimeIcon from '@rsuite/icons/Time';
 import CalendarContainer from "../Calendar/CalendarContainer.js";
-import useCalendarDate from "../Calendar/useCalendarDate.js";
+import { useCalendarDate } from "../Calendar/hooks/index.js";
+import { isEveryDateInMonth } from "../Calendar/utils/index.js";
 import Toolbar from "./Toolbar.js";
 import Stack from "../Stack/index.js";
 import PredefinedRanges from "./PredefinedRanges.js";
@@ -20,13 +21,13 @@ import InputGroup from "../InputGroup/index.js";
 import useMonthView from "./hooks/useMonthView.js";
 import useFocus from "./hooks/useFocus.js";
 import useCustomizedInput from "./hooks/useCustomizedInput.js";
-import { isEveryDateInMonth } from "../Calendar/MonthDropdown.js";
 import { mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
 import { useClassNames, useControlled, useCustom, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
-import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, copyTime, disableTime, calendarOnlyProps } from "../internals/utils/date/index.js";
+import { isValid, copyTime, disableTime, DateMode, useDateMode, calendarOnlyProps } from "../internals/utils/date/index.js";
 import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger.js";
 import { splitRanges, deprecatedPropTypes, getRestProps } from "./utils.js";
+import { startOfToday } from "../internals/utils/date/index.js";
 /**
  * A date picker allows users to select a date from a calendar.
  *
@@ -49,8 +50,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled = props.disabled,
     readOnly = props.readOnly,
     plaintext = props.plaintext,
-    _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    format = props.format,
     idProp = props.id,
     isoWeek = props.isoWeek,
     _props$weekStart = props.weekStart,
@@ -72,7 +72,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
     ranges = props.ranges,
     valueProp = props.value,
-    showMeridian = props.showMeridian,
+    DEPRECATED_showMeridian = props.showMeridian,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? DEPRECATED_showMeridian : _props$showMeridiem,
     showWeekNumbers = props.showWeekNumbers,
     style = props.style,
     size = props.size,
@@ -108,6 +110,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     overlay = _usePickerRef.overlay;
   var _useCustom = useCustom('DatePicker', overrideLocale),
     locale = _useCustom.locale;
+  var formatStr = format || locale.shortDateFormat || 'yyyy-MM-dd';
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -124,10 +127,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setMonthView = _useMonthView.setMonthView,
     monthView = _useMonthView.monthView,
     toggleMonthView = _useMonthView.toggleMonthView;
+  var _useDateMode = useDateMode(formatStr),
+    mode = _useDateMode.mode;
 
   // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
-  var showMonth = onlyShowMonth || monthView;
+  var showMonth = mode === DateMode.Month || monthView;
   var _useFocus = useFocus({
       target: target,
       showMonth: showMonth,
@@ -173,7 +177,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOkButtonDisabled = function isOkButtonDisabled(selectedDate) {
-    if (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
+    if (mode === DateMode.Month) {
       return isMonthDisabled(selectedDate);
     }
     return isDatetimeDisabled(selectedDate);
@@ -228,22 +232,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _trigger$current, _trigger$current$clos;
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
   });
-
-  /**
-   * The callback triggered when PM/AM is switched.
-   */
-  var handleToggleMeridian = useEventCallback(function () {
-    var hours = getHours(calendarDate);
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = setHours(calendarDate, nextHours);
-    handleChangeTime(nextDate);
-  });
   var updateValue = function updateValue(event, date, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
     var nextValue = typeof date !== 'undefined' ? date : calendarDate;
-    setCalendarDate(nextValue || new Date());
+    setCalendarDate(nextValue || startOfToday());
     setValue(nextValue);
     if (nextValue !== value) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
@@ -303,16 +297,15 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = useEventCallback(function (nextValue, event, updatableValue) {
+  var handleCalendarSelect = useEventCallback(function (date, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
-    setCalendarDate(
-    // Determine whether the current value contains time, if not, use calendarDate.
-    shouldRenderTime(formatStr) ? nextValue : copyTime({
+    var nextValue = copyTime({
       from: calendarDate,
-      to: nextValue
-    }));
+      to: date
+    });
+    setCalendarDate(nextValue);
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
@@ -327,7 +320,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
-    if (oneTap && onlyShowMonth) {
+    if (oneTap && mode === DateMode.Month) {
       updateValue(event, nextPageDate);
       focusInput();
     }
@@ -338,7 +331,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var handleInputChange = useEventCallback(function (value, event) {
     if (!isErrorValue(value)) {
-      handleSelect(value, event);
+      handleCalendarSelect(value, event);
     }
     updateValue(event, value, false);
   });
@@ -403,7 +396,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
-      showMeridian: showMeridian,
+      showMeridiem: showMeridiem,
       disabledDate: isDateDisabled,
       disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
       disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
@@ -418,12 +411,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
-      onSelect: handleSelect,
+      onSelect: handleCalendarSelect,
       onToggleMonthDropdown: toggleMonthView,
       onToggleTimeDropdown: onToggleTimeDropdown,
       onChangeMonth: handleChangeMonth,
-      onChangeTime: handleChangeTime,
-      onToggleMeridian: handleToggleMeridian
+      onChangeTime: handleChangeTime
     })), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       ranges: bottomRanges,
@@ -449,8 +441,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (caretAsProp === null) {
       return null;
     }
-    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
-  }, [caretAsProp, formatStr]);
+    return caretAsProp || (mode === DateMode.Time ? TimeIcon : CalendarIcon);
+  }, [caretAsProp, mode]);
   var handleTriggerClose = useEventCallback(function (cause) {
     var _props$onClose;
     // Unless overlay is closing on user clicking "OK" button,
@@ -555,7 +547,7 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, deprecatedPropTypes, {
   onToggleTimeDropdown: PropTypes.func,
   oneTap: PropTypes.bool,
   ranges: PropTypes.array,
-  showMeridian: PropTypes.bool,
+  showMeridiem: PropTypes.bool,
   showWeekNumbers: PropTypes.bool,
   value: PropTypes.instanceOf(Date)
 });

package/esm/DatePicker/hooks/useFocus.js

@@ -3,7 +3,7 @@ import delay from 'lodash/delay';
 import addMonths from 'date-fns/addMonths';
 import addDays from 'date-fns/addDays';
 import { useEventCallback, useCustom } from "../../internals/hooks/index.js";
-import { getAriaLabel } from "../../Calendar/utils.js";
+import { getAriaLabel } from "../../Calendar/utils/index.js";
 import { onMenuKeyDown } from "../../internals/Picker/utils.js";
 function useFocus(props) {
   var target = props.target,

package/esm/DatePicker/utils.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import { deprecatePropTypeNew } from "../internals/propTypes/index.js";
 import { omitTriggerPropKeys } from "../internals/Picker/index.js";
-import { subDays, startOfDay, endOfDay, calendarOnlyProps } from "../internals/utils/date/index.js";
+import { subDays, startOfDay, endOfDay, calendarOnlyProps, startOfToday } from "../internals/utils/date/index.js";
 export function getDefaultRanges(value) {
-  var today = new Date();
+  var today = startOfToday();
 
   /**
    * If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,

package/esm/DateRangeInput/DateRangeInput.js

@@ -16,13 +16,16 @@ import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from "
  * @see https://rsuitejs.com/components/date-range-input/
  */
 var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,
     _props$character = props.character,
     character = _props$character === void 0 ? ' ~ ' : _props$character,
     _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    formatStr = _props$format === void 0 ? locale.shortDateFormat : _props$format,
     valueProp = props.value,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
@@ -41,9 +44,6 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useSelectedState = useSelectedState(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = useCustom('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var dateLocale = locale.dateLocale;
   var _useControlled = useControlled(valueProp, defaultValue),
@@ -103,6 +103,14 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     setValue(nextValue);
   });
+  var handleClear = useEventCallback(function (event) {
+    startDateState.setNewDate(null);
+    endDateState.setNewDate(null);
+    setSelectionRange(0, 0);
+    reset();
+    setValue(null);
+    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
+  });
   var onSegmentChange = useEventCallback(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
@@ -182,7 +190,10 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var onSegmentValueRemove = useEventCallback(function (event) {
     var input = event.target;
-    if (selectedState.selectedPattern) {
+    var value = input.value;
+    if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
+      handleClear(event);
+    } else if (selectedState.selectedPattern) {
       var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
         input: input,
         valueOffset: null

package/esm/DateRangePicker/Calendar.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { CalendarProps as CalendarCoreProps } from '../Calendar/CalendarContainer';
+import { CalendarProps as CalendarContainerProps } from '../Calendar/CalendarContainer';
 import { DATERANGE_DISABLED_TARGET } from '../internals/constants';
 import { DateRange } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import { DatePickerLocale } from '../locales';
-type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'format' | 'locale' | 'onToggleMeridian';
-export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
-    calendarDate?: DateRange;
+type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'format' | 'locale';
+export interface CalendarProps extends WithAsProps, Omit<CalendarContainerProps, OmitCalendarCoreTypes> {
+    calendarDateRange?: DateRange;
     disabledDate?: (date: Date, selectValue: [] | [Date] | [Date, Date], type: DATERANGE_DISABLED_TARGET) => boolean;
     format?: string;
     hoverRangeValue?: DateRange;
@@ -20,7 +20,6 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     value?: [] | [Date] | [Date, Date];
     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;
 }

package/esm/DateRangePicker/Calendar.js

@@ -1,17 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"];
-import React from 'react';
-import CalendarCore from "../Calendar/CalendarContainer.js";
-import { addMonths } from "../internals/utils/date/index.js";
+var _excluded = ["as", "calendarDateRange", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onSelect", "value"];
+import React, { useCallback } from 'react';
+import CalendarContainer from "../Calendar/CalendarContainer.js";
+import { addMonths, startOfToday } from "../internals/utils/date/index.js";
 import { DATERANGE_DISABLED_TARGET } from "../internals/constants/index.js";
-import { useEventCallback } from "../internals/hooks/index.js";
+import { useCalendarHandlers } from "./hooks/index.js";
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-    Component = _props$as === void 0 ? CalendarCore : _props$as,
-    _props$calendarDate = props.calendarDate,
-    calendarDate = _props$calendarDate === void 0 ? [new Date(), addMonths(new Date(), 1)] : _props$calendarDate,
+    Component = _props$as === void 0 ? CalendarContainer : _props$as,
+    _props$calendarDateRa = props.calendarDateRange,
+    calendarDateRange = _props$calendarDateRa === void 0 ? [startOfToday(), addMonths(startOfToday(), 1)] : _props$calendarDateRa,
     _props$format = props.format,
     format = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     disabledDate = props.disabledDate,
@@ -21,57 +21,29 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     limitStartYear = props.limitStartYear,
     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, _excluded);
-  var onMoveForward = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var onMoveBackward = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleSelect = useEventCallback(function (date, event) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
-  });
-  var handleChangeMonth = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleChangeTime = useEventCallback(function (nextPageDate) {
-    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
-  });
-  var handleToggleMeridian = useEventCallback(function (event) {
-    onToggleMeridian(index, event);
-  });
-  var getCalendarDate = function getCalendarDate() {
-    return calendarDate[index];
-  };
-  var handleMoveForward = useEventCallback(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(getCalendarDate(), 1));
-  });
-  var handleMoveBackward = useEventCallback(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
+  var calendarHandlers = useCalendarHandlers({
+    index: index,
+    calendarDateRange: calendarDateRange,
+    onChangeCalendarMonth: onChangeCalendarMonth,
+    onChangeCalendarTime: onChangeCalendarTime,
+    onSelect: onSelect
   });
-  var disabledMonth = function disabledMonth(date) {
+  var disableCalendarDate = useCallback(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
-  };
+  }, [disabledDate, value]);
   return /*#__PURE__*/React.createElement(Component, _extends({
     "data-testid": "calendar-" + (index === 0 ? 'start' : 'end')
-  }, rest, {
+  }, rest, calendarHandlers, {
+    index: index,
     format: format,
     dateRange: value,
-    disabledDate: disabledMonth,
-    index: index,
+    disabledDate: disableCalendarDate,
     limitEndYear: limitEndYear,
     limitStartYear: limitStartYear,
-    onChangeMonth: handleChangeMonth,
-    onChangeTime: handleChangeTime,
-    onMoveBackward: handleMoveBackward,
-    onMoveForward: handleMoveForward,
-    onToggleMeridian: handleToggleMeridian,
-    onSelect: handleSelect,
-    calendarDate: getCalendarDate(),
     ref: ref
   }));
 });

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -3,17 +3,18 @@ import { PickerComponent } from '../internals/Picker';
 import type { DisabledDateFunction, RangeType, DateRange } from './types';
 import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
 import type { DateRangePickerLocale } from '../locales';
-import type { MonthDropdownProps } from '../Calendar/CalendarContext';
+import type { MonthDropdownProps } from '../Calendar/types';
 export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLocale>, FormControlBaseProps<DateRange | null> {
     /**
      * Custom caret component
      */
     caretAs?: React.ElementType | null;
-    /** Predefined date ranges */
+    /**
+     * Predefined date ranges
+     */
     ranges?: RangeType[];
     /**
      * Format of the date displayed in the input box
-     * @default 'yyyy-MM-dd'
      */
     format?: string;
     /**
@@ -68,9 +69,13 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      */
     showOneCalendar?: boolean;
     /**
-     * Meridian format
+     * @deprecated Use `showMeridiem` instead
      */
     showMeridian?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
     /**
      * Whether to display the formatted date range at the header of the calendar
      * @default true
@@ -118,6 +123,18 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Whether a date cell is disabled
      */
     shouldDisableDate?: DisabledDateFunction;
+    /**
+     * Disabled hours on the time view
+     */
+    shouldDisableHour?: (hour: number, date: Date) => boolean;
+    /**
+     * Disabled minutes on the time view
+     */
+    shouldDisableMinute?: (minute: number, date: Date) => boolean;
+    /**
+     * Disabled seconds on the time view
+     */
+    shouldDisableSecond?: (second: number, date: Date) => boolean;
     /**
      * Called when the option is selected
      */