跳到内容

TimePickerAPI

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

演示

导入

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

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

属性

原生组件的属性也可用。

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

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

ampmInClockbool桌面端为 true，移动端为 false

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

autoFocusbool-

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

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

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

defaultValueobject-

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

desktopModeMediaQuerystring'@media (pointer: fine)'

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

disabledboolfalse

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

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disableOpenPickerboolfalse

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

disablePastboolfalse

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

formatstring-

在输入框中渲染日期时的格式。默认为基于所用 views 的本地化格式。

formatDensity'dense'
| 'spacious'		"dense"

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

inputRefref-

将 ref 传递给 input 元素。

labelnode-

标签内容。

localeTextobject-

组件文本的区域设置。 允许覆盖来自 LocalizationProvider 和 theme 的文本。

maxTimeobject-

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

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 与错误关联的值。
onOpenfunc-

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

onSelectedSectionsChangefunc-

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

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

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

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

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

openTo'hours'
| 'meridiem'
| 'minutes'
| 'seconds'		-

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

orientation'landscape'
| 'portrait'		-

强制以特定方向渲染。

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

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

referenceDateobject使用验证属性的最接近的有效日期时间，但回调函数（如 shouldDisable<...>）除外。

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

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

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

shouldDisableTimefunc-

禁用特定时间。

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

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

skipDisabledboolfalse

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

slotPropsobject{}

用于每个组件插槽的属性。

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 属性的时区，否则为 'default'。

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

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

valueobject-

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

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

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

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

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

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

可用视图。

组件无法容纳 ref。

插槽

插槽名称类名默认组件描述
actionBarPickersActionBar操作栏的自定义组件，它位于选择器视图下方。
clearButtonIconButton用于清除值的按钮。
clearIconClearIcon用于显示在清除按钮内的图标。
desktopPaperPickersPopperPaper用于在桌面选择器的 Popper 中渲染的纸张的自定义组件。
desktopTransition当 reduceAnimations 为 true 时，从 '@mui/material' 增长或淡入。桌面 popper Transition 的自定义组件。
desktopTrapFocus来自 '@mui/material' 的 TrapFocus。用于在桌面端捕获视图内焦点的自定义组件。
dialogPickersModalDialogRoot用于在移动端渲染视图的对话框的自定义组件。
digitalClockItem来自 '@mui/material' 的 MenuItem负责渲染单个数字时钟项的组件。
digitalClockSectionItem来自 '@mui/material' 的 MenuItem负责渲染单个多段数字时钟段项的组件。
field用于通过键盘输入日期的组件。
inputAdornmentInputAdornment显示在开始或结束输入装饰上的组件，用于在桌面端打开选择器。
layout用于包装布局的自定义组件。 它包装了工具栏、视图、操作栏和快捷方式。
leftArrowIconArrowLeft显示在左视图切换按钮中的图标。
mobilePaper来自 '@mui/material' 的 Paper。用于在移动选择器的 Dialog 中渲染的纸张的自定义组件。
mobileTransition来自 '@mui/material' 的 Fade。移动对话框 Transition 的自定义组件。
nextIconButtonIconButton允许切换到右侧视图的按钮。
openPickerButtonIconButton用于在桌面端打开选择器的按钮。
openPickerIcon显示在桌面端打开选择器按钮中的图标。
popper来自 '@mui/material' 的 Popper。用于在桌面端渲染视图的 popper 的自定义组件。
previousIconButtonIconButton允许切换到左侧视图的按钮。
rightArrowIconArrowRight显示在右视图切换按钮中的图标。
shortcutsPickersShortcuts快捷方式的自定义组件。
textField来自 '@mui/material' 的 TextField 或 PickersTextField（如果 enableAccessibleFieldDOMStructure 为 true）。带有输入框的表单控件，用于在默认字段内渲染值。
toolbarTimePickerToolbar用于在视图上方渲染的工具栏的自定义组件。

源代码

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