跳到内容

DateRangePickerAPI

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

演示

导入

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

通过阅读关于最小化捆绑包大小的指南，了解它们之间的区别。

Props

名称类型默认描述
autoFocusbool-

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

calendars1
| 2
| 3		2

要在桌面端渲染的日历数量。

closeOnSelectbool桌面端为 true，移动端为 false（基于所选的包装器和 desktopModeMediaQuery prop）。

如果为 true，则在提交完整日期后，弹出窗口或模态窗口将关闭。

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>-

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

desktopModeMediaQuerystring'@media (pointer: fine)'

当 Mobile 模式将更改为 Desktop 时的 CSS 媒体查询。

disableAutoMonthSwitchingboolfalse

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

disabledboolfalse

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

disableDragEditingboolfalse

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

disableFutureboolfalse

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

disableHighlightTodayboolfalse

如果为 true，则今天的日期在渲染时不会用圆圈突出显示。

disableOpenPickerboolfalse

如果为 true，则不会渲染打开选择器按钮（仅渲染字段）。

disablePastboolfalse

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

displayWeekNumberbool-

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

fixedWeekNumbernumber-

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

formatstring-

输入中呈现的日期格式。 默认为基于使用的 views 的本地化格式。

formatDensity'dense'
| 'spacious'		"dense"

输入中呈现的格式密度。 将 formatDensity 设置为 "spacious" 将在每个 /、- 和 . 字符前后添加一个空格。

inputRefref-

将 ref 传递给 input 元素。 如果字段有多个输入，则忽略。

labelnode-

标签内容。 如果字段有多个输入，则忽略。

loadingboolfalse

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

localeTextobject-

组件文本的语言环境。 允许覆盖来自 LocalizationProvider 和 theme 的文本。

maxDateobject2099-12-31

最大可选日期。

minDateobject1900-01-01

最小可选日期。

namestring-

字段中 input 元素使用的 Name 属性。 如果字段有多个输入，则忽略。

onAcceptfunc-

当值被接受时触发的回调。

签名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 刚被接受的值。
  • context 包含当前值的验证结果的上下文。
onChangefunc-

当值更改时触发的回调。

签名：function(value: TValue, context: FieldChangeHandlerContext) => void
  • value 新值。
  • context 包含当前值的验证结果的上下文。
onClosefunc-

当弹出窗口请求关闭时触发的回调。 在受控模式下使用（请参阅 open）。

onErrorfunc-

当与当前值关联的错误更改时触发的回调。 当检测到验证错误时，error 参数包含非空值。 这可用于渲染适当的表单错误。

签名：function(error: TError, value: TValue) => void
  • error 当前值无效的原因。
  • value 与错误关联的值。
onMonthChangefunc-

在月份更改时触发的回调。

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

当弹出窗口请求打开时触发的回调。 在受控模式下使用（请参阅 open）。

onRangePositionChangefunc-

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

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

当选定的部分更改时触发的回调。

签名：function(newValue: FieldSelectedSections) => void
  • newValue 新的选定部分。
openboolfalse

控制弹出窗口或对话框的打开状态。

rangePosition'end'
| 'start'		-

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

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

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

referenceDateobject使用验证 props 的最近有效日期时间，除了像 shouldDisable<...> 这样的回调。

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

renderLoadingfunc() => "..."

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

签名：function() => React.ReactNode

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

    selectedSections'all'
    | 'day'
    | 'empty'
    | 'hours'
    | 'meridiem'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'weekDay'
    | 'year'
    | number    		-

    当前选定的部分。 此 prop 接受四种格式：1. 如果提供数字，则将选择此索引处的部分。 2. 如果提供类型为 FieldSectionType 的字符串，则将选择具有该名称的第一个部分。 3. 如果提供 "all"，则将选择所有部分。 4. 如果提供 null，则不选择任何部分。 如果未提供，则选定的部分将在内部处理。

    shouldDisableDatefunc-

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

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

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

    showDaysOutsideCurrentMonthboolfalse

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

    slotPropsobject{}

    用于每个组件插槽的 props。

    slotsobject{}

    可覆盖的组件插槽。

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

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

    允许定义系统覆盖以及其他 CSS 样式的系统 prop。

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

    timezonestringvalue 或 defaultValue prop 的时区已定义，否则为 'default'。

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

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

    valueArray<object>-

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

    viewRenderers{ day?: func }-

    为每个部分定义自定义视图渲染器。 如果为 null，则该部分将仅具有字段编辑。 如果为 undefined，则将使用内部定义的视图。

    ref 被转发到根元素。

    插槽

    插槽名称类名默认组件描述
    actionBarPickersActionBar操作栏的自定义组件，它位于选择器视图下方。
    calendarHeaderPickersCalendarHeader日历标题的自定义组件。 检查 PickersCalendarHeader 组件。
    clearButtonIconButton用于清除值的按钮。
    clearIconClearIcon在清除按钮内显示的图标。
    dayDateRangePickersDay范围选择器中日期的自定义组件。 检查 DateRangePickersDay 组件。
    desktopPaperPickersPopperPaper用于在桌面选择器的 Popper 中渲染的纸张的自定义组件。
    desktopTransition当 reduceAnimations 为 true 时，从 '@mui/material' 增长或淡入淡出。桌面 popper Transition 的自定义组件。
    desktopTrapFocus来自 '@mui/material' 的 TrapFocus。用于在桌面上捕获视图内焦点的自定义组件。
    dialogPickersModalDialogRoot用于在移动设备上渲染视图的对话框的自定义组件。
    field
    fieldRoot在根目录渲染的元素。 如果字段只有一个输入，则忽略。
    fieldSeparator在两个输入之间渲染的元素。 如果字段只有一个输入，则忽略。
    layout用于包装布局的自定义组件。 它包装工具栏、视图、操作栏和快捷方式。
    leftArrowIconArrowLeft在左视图切换按钮中显示的图标。
    mobilePaper来自 '@mui/material' 的 Paper。用于在移动选择器的 Dialog 中渲染的纸张的自定义组件。
    mobileTransition来自 '@mui/material' 的 Fade。移动对话框 Transition 的自定义组件。
    nextIconButtonIconButton允许切换到右视图的按钮。
    popper来自 '@mui/material' 的 Popper。用于在桌面上渲染视图的 popper 的自定义组件。
    previousIconButtonIconButton允许切换到左视图的按钮。
    rightArrowIconArrowRight在右视图切换按钮中显示的图标。
    shortcutsPickersShortcuts快捷方式的自定义组件。
    switchViewButtonIconButton显示用于在不同日历视图之间切换的按钮。
    switchViewIconArrowDropDown在 SwitchViewButton 中显示的图标。 当打开的视图为 year 时旋转 180°。
    textField来自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 为 true）。具有输入以在默认字段内渲染日期或时间的表单控件。 它渲染两次：一次用于开始元素，一次用于结束元素。
    toolbarDateTimePickerToolbar在视图上方渲染的工具栏的自定义组件。

    源代码

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