跳到内容

DesktopDateTimeRangePickerAPI

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

演示

导入

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

通过阅读本指南，了解有关最小化捆绑包大小的差异。

Props

名称类型默认值描述
ampmboolutils.is12HourCycleInCurrentLocale()

小时选择时钟的 12 小时/24 小时视图。

autoFocusbool-

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

calendars1
| 2
| 3		1

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

closeOnSelectbool桌面端为 true，移动端为 false（基于所选的 wrapper 和 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>-

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

disableAutoMonthSwitchingboolfalse

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

disabledboolfalse

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

disableDragEditingboolfalse

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

disableFutureboolfalse

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

disableHighlightTodayboolfalse

如果为 true，则今天日期将不使用圆圈高亮显示渲染。

disableIgnoringDatePartForTimeValidationboolfalse

验证最小/最大时间时，不要忽略日期部分。

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

最大可选择日期。

maxDateTimeobject-

最大可选择的日期时间时刻，与日期绑定，要在每天设置最大时间，请使用 maxTime。

maxTimeobject-

最大可选择时间。除非 props.disableIgnoringDatePartForTimeValidation === true，否则将忽略对象的日期部分。

minDateobject1900-01-01

最小可选择日期。

minDateTimeobject-

最小可选择的日期时间时刻，与日期绑定，要在每天设置最小时间，请使用 minTime。

minTimeobject-

最小可选择时间。除非 props.disableIgnoringDatePartForTimeValidation === true，否则将忽略对象的日期部分。

minutesStepnumber1

分钟的步长。

namestring-

Field 中 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 新的选定部分。
onViewChangefunc-

视图更改时触发的回调。

签名:function(view: TView) => void
  • view 新视图。
openboolfalse

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

openTo'day'
| 'hours'
| 'minutes'
| 'seconds'		-

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

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。

    shouldDisableTimefunc-

    禁用特定时间。

    签名:function(value: TDate, view: TimeView) => boolean
    • value 要检查的值。
    • view timeValue 的时钟类型。

    返回: 如果为 true，则将禁用时间。

    showDaysOutsideCurrentMonthboolfalse

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

    skipDisabledboolfalse

    如果为 true，则不会渲染禁用的数字时钟项目。

    slotPropsobject{}

    用于每个组件插槽的 props。

    slotsobject{}

    可覆盖的组件插槽。

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

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

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

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

    thresholdToRenderTimeInASingleColumnnumber24

    低于或等于此时间选项数量时，将使用单列时间渲染器。

    timeSteps{ hours?: number, minutes?: number, seconds?: number }{ hours: 1, minutes: 5, seconds: 5 }

    两个时间单位选项之间的时间步长。例如，如果 timeStep.minutes = 8，则可用的分钟选项将为 [0, 8, 16, 24, 32, 40, 48, 56]。当使用单列时间渲染器时，将仅使用 timeStep.minutes。

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

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

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

    valueArray<object>-

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

    view'day'
    | 'hours'
    | 'meridiem'
    | 'minutes'
    | 'seconds'    		-

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

    viewRenderers{ day?: func, hours?: func, meridiem?: func, minutes?: func, seconds?: func }-

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

    viewsArray<'day'
    | 'hours'
    | 'minutes'
    | 'seconds'>    		-

    可用视图。

    ref 被转发到根元素。

    插槽

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

    源代码

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