跳到内容

DateRangeCalendarAPI

React DateRangeCalendar 组件的 API 参考文档。 了解此导出模块的 props、CSS 和其他 API。

演示

导入

import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
// or
import { DateRangeCalendar } from '@mui/x-date-pickers-pro';

通过阅读此关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
autoFocusbool-

如果为 true，则主元素在首次挂载期间获得焦点。 此主元素是： - 可见视图选择的元素（如果有）（即：day 视图上选定的日期）。 - 如果渲染了字段，则为 input 元素。

availableRangePositionsArray<'end'
| 'start'>		['start', 'end']

可供选择的范围位置。 当检查是否可以选择下一个范围位置时，将对照此列表进行检查。
在具有当前 rangePosition 的日期时间范围选择器上使用，以在仅选择一个范围位置后强制 finish 选择。

calendars1
| 2
| 3		2

要渲染的日历数量。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参见下面的 CSS 类 API。

currentMonthCalendarPosition1
| 2
| 3		1

当前月份渲染位置。

dayOfWeekFormatterfunc(date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

格式化日历标题中显示的一周中的某天。

签名：function(date: TDate) => string
  • date 适配器提供的一周中某天的日期。

返回值： 要显示的名称。

defaultRangePosition'end'
| 'start'		'start'

编辑日期范围的初始位置。 当组件不受控制时使用。

defaultValueArray<object>-

默认选定值。 当组件不受控制时使用。

disableAutoMonthSwitchingboolfalse

如果为 true，则在选择 start 日期后，日历不会自动切换到 end 日期的月份。

disabledboolfalse

如果为 true，则禁用选择器和文本字段。

disableDragEditingboolfalse

如果为 true，则禁用通过拖动编辑日期。

disableFutureboolfalse

如果为 true，则禁用日期组件的当前日期之后的值，时间组件的时间以及日期时间组件的两者。

disableHighlightTodayboolfalse

如果为 true，则今天的日期将呈现，而不会以圆圈突出显示。

disablePastboolfalse

如果为 true，则禁用日期组件的当前日期之前的值，时间组件的时间以及日期时间组件的两者。

displayWeekNumberbool-

如果为 true，则周数将显示在日历中。

fixedWeekNumbernumber-

日期视图将显示当前月份结束后所需的周数以匹配此值。 设置为 6 以在公历中具有固定周数

focusedView'day'-

受控的焦点视图。

loadingboolfalse

如果为 true，则调用 renderLoading 而不是渲染日期日历。 可用于预加载信息并在日历中显示。

maxDateobject2099-12-31

最大可选择日期。

minDateobject1900-01-01

最小可选择日期。

onChangefunc-

值更改时触发的回调。

签名：function(value: TValue, selectionState: PickerSelectionState | undefined, selectedView: TView | undefined) => void
  • value 新值。
  • selectionState 指示日期选择是否完成。
  • selectedView 指示在哪个视图中进行了选择。
onFocusedViewChangefunc-

焦点视图更改时触发的回调。

签名：function(view: TView, hasFocus: boolean) => void
  • view 要聚焦或不聚焦的新视图。
  • hasFocus 如果应聚焦视图，则为 true。
onMonthChangefunc-

月份更改时触发的回调。

签名：function(month: TDate) => void
  • month 新月份。
onRangePositionChangefunc-

范围位置更改时触发的回调。

签名：function(rangePosition: RangePosition) => void
  • rangePosition 新的范围位置。
onViewChangefunc-

视图更改时触发的回调。

签名：function(view: TView) => void
  • view 新视图。
openTo'day'-

默认可见视图。 当组件视图不受控制时使用。 必须是 views 列表中的有效选项。

rangePosition'end'
| 'start'		-

当前编辑的日期范围中的位置。 当组件位置受控制时使用。

readOnlyboolfalse

使选择器变为只读。

reduceAnimationsbool`@media(prefers-reduced-motion: reduce)` || `navigator.userAgent` 匹配 Android <10 或 iOS <13

如果为 true，则禁用繁重的动画。

referenceDateobject使用验证 props 的最接近的有效日期，回调（例如 `shouldDisableDate`）除外。

当 value 和 defaultValue 都为空时，用于生成新值的日期。

renderLoadingfunc() => "..."

当 props.loading 为 true 时，在“day”视图上渲染的组件。

签名：function() => React.ReactNode

    返回值： 加载时要渲染的节点。

    shouldDisableDatefunc-

    禁用特定日期。
    警告：此函数可以被多次调用（例如，在渲染日期日历、检查焦点是否可以移动到特定日期等时）。 昂贵的计算会影响性能。

    签名：function(day: TDate, position: string) => boolean
    • day 要测试的日期。
    • position 要测试的日期，“start”或“end”。

    返回值： 如果应禁用日期，则返回 true。

    showDaysOutsideCurrentMonthboolfalse

    如果为 true，则渲染当前月份之外的日期
    - 如果定义了 fixedWeekNumber，则渲染日期以具有请求的周数。
    - 如果未定义 fixedWeekNumber，则渲染日期以填充当前月份的第一周和最后一周。
    - 如果 calendars 等于范围选择器上的 1 以上，则忽略。

    slotPropsobject{}

    用于每个组件插槽的 props。

    slotsobject{}

    可覆盖的组件插槽。

    有关更多详细信息，请参见下面的 插槽 API。

    sxArray<func
    | object
    | bool>
    | func
    | object    		-

    系统属性，允许定义系统覆盖以及其他 CSS 样式。

    有关更多详细信息，请参见 `sx` 页面。

    timezonestring`value` 或 `defaultValue` prop 的时区已定义，否则为“default”。

    选择用于值的时区。 示例：“default”、“system”、“UTC”、“America/New_York”。 如果您将来自其他时区的值传递给某些 props，则它们将在使用前转换为此时区。

    有关更多详细信息，请参见 时区文档。

    valueArray<object>-

    选定的值。 当组件受控制时使用。

    view'day'-

    可见视图。 当组件视图受控制时使用。 必须是 views 列表中的有效选项。

    viewsArray<'day'>-

    可用视图。

    ref 被转发到根元素。

    主题默认 props

    您可以使用 MuiDateRangeCalendar 通过主题更改此组件的默认 props。

    插槽

    插槽名称类名默认组件描述
    calendarHeaderPickersCalendarHeader日历标题的自定义组件。 查看 PickersCalendarHeader 组件。
    dayDateRangePickersDay范围选择器中日期的自定义组件。 查看 DateRangePickersDay 组件。
    leftArrowIconArrowLeft在左视图切换按钮中显示的图标。
    nextIconButtonIconButton允许切换到右视图的按钮。
    previousIconButtonIconButton允许切换到左视图的按钮。
    rightArrowIconArrowRight在右视图切换按钮中显示的图标。
    switchViewButtonIconButton显示的用于在不同日历视图之间切换的按钮。
    switchViewIconArrowDropDown在 SwitchViewButton 中显示的图标。 当打开的视图为 year 时旋转 180°。

    CSS 类

    这些类名对于使用 CSS 进行样式设置很有用。 当触发特定状态时，它们将应用于组件的插槽。

    类名规则名称描述
    .MuiDateRangeCalendar-dayDraggingdayDragging拖动时应用于日期日历容器的样式
    .MuiDateRangeCalendar-monthContainermonthContainer应用于月份容器的样式。
    .MuiDateRangeCalendar-rootroot应用于根元素的样式。

    您可以使用以下自定义选项之一来覆盖组件的样式

    源代码

    如果您在此页面中找不到信息，请考虑查看组件的实现以获取更多详细信息。