跳到内容

DesktopDateTimePickerAPI

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

演示

导入

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

阅读这篇关于最小化 bundle 大小的指南，了解两者之间的区别。

Props

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

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

ampmInClockbooltrue on desktop, false on mobile

在时钟下方（而不是在工具栏中）显示 ampm 控件。

autoFocusbool-

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

closeOnSelectbool`true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).

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

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

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

Signature:function(date: TDate) => string
  • date The date of the day of week provided by the adapter.

返回： 要显示的名称。

defaultValueobject-

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

disabledboolfalse

如果为 `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

分钟步长。

monthsPerRow3
| 4		3

每行渲染的月份数。

namestring-

Field 中 `input` 元素使用的 Name 属性。

onAcceptfunc-

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

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

当值更改时触发的回调。

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

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

onErrorfunc-

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

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

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

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

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

onSelectedSectionsChangefunc-

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

Signature:function(newValue: FieldSelectedSections) => void
  • newValue 新选定的部分。
onViewChangefunc-

在视图更改时触发的回调。

Signature:function(view: TView) => void
  • view 新视图。
onYearChangefunc-

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

Signature:function(year: TDate) => void
  • year 新年份。
openboolfalse

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

openTo'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'		-

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

orientation'landscape'
| 'portrait'		-

强制以特定方向渲染。

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

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

referenceDateobject使用验证 props 的最接近的有效日期时间，但 `shouldDisable<...>` 等回调除外。

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

renderLoadingfunc() => <span>...</span>

当传递 `loading` 为 true 时显示的组件。

Signature:function() => React.ReactNode

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

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

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

    shouldDisableDatefunc-

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

    Signature:function(day: TDate) => boolean
    • day The date to test.

    返回： 如果为 `true`，则将禁用日期。

    shouldDisableMonthfunc-

    禁用特定月份。

    Signature:function(month: TDate) => boolean
    • month The month to test.

    返回： 如果为 `true`，则将禁用月份。

    shouldDisableTimefunc-

    禁用特定时间。

    Signature:function(value: TDate, view: TimeView) => boolean
    • value The value to check.
    • view The clock type of the timeValue.

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

    shouldDisableYearfunc-

    禁用特定年份。

    Signature:function(year: TDate) => boolean
    • year The year to test.

    返回： 如果为 `true`，则将禁用年份。

    showDaysOutsideCurrentMonthboolfalse

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

    skipDisabledboolfalse

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

    slotPropsobject{}

    用于每个组件插槽的 props。

    slotsobject{}

    可覆盖的组件插槽。

    请参阅下面的 Slots API 了解更多详细信息。

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

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

    请参阅 `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，则它们将在使用前转换为此时区。

    请参阅 时区文档 了解更多详细信息。

    valueobject-

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

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

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

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

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

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

    可用视图。

    yearsOrder'asc'
    | 'desc'    		'asc'

    默认情况下，年份按升序（按时间顺序）显示。如果为 `desc`，则年份按降序显示。

    yearsPerRow3
    | 4    		4

    每行渲染的年份数。

    `ref` 被转发到根元素。

    插槽

    插槽名称类名默认组件描述
    actionBarPickersActionBar操作栏的自定义组件，它放置在选择器视图下方。
    calendarHeaderPickersCalendarHeader日历标题的自定义组件。请查看 PickersCalendarHeader 组件。
    clearButtonIconButton清除值的按钮。
    clearIconClearIcon在清除按钮内显示的图标。
    dayPickersDay日期的自定义组件。请查看 PickersDay 组件。
    desktopPaperPickersPopperPaper在桌面选择器的 Popper 中渲染的纸张的自定义组件。
    desktopTransitionGrow or Fade from '@mui/material' when `reduceAnimations` is `true`.桌面 popper Transition 的自定义组件。
    desktopTrapFocusTrapFocus from '@mui/material'.用于在桌面上捕获视图内焦点的自定义组件。
    digitalClockItemMenuItem from '@mui/material'负责渲染单个数字时钟项的组件。
    digitalClockSectionItemMenuItem from '@mui/material'负责渲染单个多节数字时钟节项的组件。
    field用于使用键盘输入日期的组件。
    inputAdornmentInputAdornment在开始或结束输入装饰上显示的组件，用于在桌面上打开选择器。
    layout用于包装布局的自定义组件。它包装工具栏、视图、操作栏和快捷方式。
    leftArrowIconArrowLeft在左侧视图切换按钮中显示的图标。
    monthButtonMonthCalendarButton在 `month` 视图中显示以渲染单个月份的按钮。
    nextIconButtonIconButton允许切换到右侧视图的按钮。
    openPickerButtonIconButton在桌面上打开选择器的按钮。
    openPickerIcon在桌面上的打开选择器按钮中显示的图标。
    popperPopper from '@mui/material'.在其中渲染桌面视图的 popper 的自定义组件。
    previousIconButtonIconButton允许切换到左侧视图的按钮。
    rightArrowIconArrowRight在右侧视图切换按钮中显示的图标。
    shortcutsPickersShortcuts快捷方式的自定义组件。
    switchViewButtonIconButton显示以在不同日历视图之间切换的按钮。
    switchViewIconArrowDropDown在 SwitchViewButton 中显示的图标。当打开的视图为 `year` 时，旋转 180°。
    tabsDateTimePickerTabs启用在日期和时间选择器之间切换的选项卡。
    textFieldTextField from '@mui/material' or PickersTextField if `enableAccessibleFieldDOMStructure` is `true`.带有输入的表单控件，用于在默认字段内渲染值。
    toolbarDateTimePickerToolbar在视图上方渲染的工具栏的自定义组件。
    yearButtonYearCalendarButton在 `year` 视图中显示以渲染单个年份的按钮。

    源代码

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