跳到内容

TimeFieldAPI

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

演示

Import

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

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

Props

原生组件的 Props 也可用。

NameTypeDefaultDescription
ampmboolutils.is12HourCycleInCurrentLocale()

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

autoFocusboolfalse

如果 true，则在首次挂载期间 input 元素获得焦点。

clearableboolfalse

如果 true，字段中将显示一个清除按钮，允许清除值。

color'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'		'primary'

组件的颜色。 它同时支持默认主题颜色和自定义主题颜色，自定义主题颜色可以按照调色板自定义指南中所示的方式添加。

defaultValueobject-

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

disabledboolfalse

如果 true，则组件被禁用。

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disablePastboolfalse

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

focusedbool-

如果 true，则组件以聚焦状态显示。

formatstring-

在输入框中呈现日期时的格式。

formatDensity'dense'
| 'spacious'		"dense"

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

FormHelperTextPropsobject-

应用于 FormHelperText 元素的 Props。

fullWidthboolfalse

如果 true，则输入框将占据其容器的全部宽度。

helperTextnode-

辅助文本内容。

hiddenLabelboolfalse

如果 true，则标签将被隐藏。 这用于增加 FilledInput 的密度。 请务必将 aria-label 添加到 input 元素。

idstring-

input 元素的 id。 使用此 prop 使 label 和 helperText 可供屏幕阅读器访问。

InputLabelPropsobject-

应用于 InputLabel 元素的 Props。 当且仅当 shrink 为 true 时，才启用诸如 onClick 之类的指针事件。

inputPropsobject-

应用于 input 元素的属性。

InputPropsobject-

应用于 Input 元素的 Props。 它将是 FilledInput、OutlinedInput 或 Input 组件，具体取决于 variant prop 值。

inputRefref-

将 ref 传递给 input 元素。

labelnode-

标签内容。

margin'dense'
| 'none'
| 'normal'		'none'

如果为 dense 或 normal，将调整此组件和包含组件的垂直间距。

maxTimeobject-

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

minTimeobject-

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

minutesStepnumber1

分钟步长。

namestring-

input 元素的 Name 属性。

onChangefunc-

值更改时触发的回调。

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

单击清除按钮时触发的回调。

onErrorfunc-

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

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

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

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

它阻止用户更改字段的值（而不是与字段交互）。

referenceDateobject使用验证 props 的最近有效日期，但回调（例如 `shouldDisableDate`）除外。 值四舍五入到使用的最精细的部分。

用于生成新值的一部分的日期，当 value 和 defaultValue 都为空时，该日期在格式中不存在。 例如，在时间字段上，它将用于确定要设置的日期。

requiredboolfalse

如果 true，则标签显示为必填项，并且 input 元素为必填项。

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

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

shouldDisableTimefunc-

禁用特定时间。

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

Returns: 如果 true，时间将被禁用。

shouldRespectLeadingZerosboolfalse

如果 true，则格式将遵循前导零（例如：在 dayjs 上，格式 M/D/YYYY 将呈现 8/16/2018）。 如果 false，则格式将始终添加前导零（例如：在 dayjs 上，格式 M/D/YYYY 将呈现 08/16/2018）。
警告 n°1：Luxon 在使用宏标记（例如：“DD”）时无法遵循前导零，因此当使用 AdapterLuxon 时，shouldRespectLeadingZeros={true} 可能会导致不一致。
警告 n°2：当 shouldRespectLeadingZeros={true} 时，字段将在包含单个数字的部分上添加一个不可见字符，以确保触发 onChange。 如果您需要从输入框中获取干净的值，则可以使用 input.value.replace(/\u200e/g, '') 删除此字符。
警告 n°3：当以严格模式使用时，dayjs 和 moment 需要遵循前导零。 这意味着当使用 shouldRespectLeadingZeros={false} 时，如果您直接从输入框检索值（不监听 onChange）并且您的格式包含没有前导零的标记，则您的库将无法解析该值。

size'medium'
| 'small'		-

组件的尺寸。

slotPropsobject{}

用于每个组件插槽的 props。

slotsobject{}

可覆盖的组件插槽。

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

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

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

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

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

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

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

unstableFieldReffunc
| object		-

用于命令式地与字段交互的 ref 对象。

valueobject-

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

variant'filled'
| 'outlined'
| 'standard'		'outlined'

要使用的 variant。

ref 被转发到根元素。

主题默认 Props

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

CSS 类

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

类名规则名称Description
.MuiTimeField-rootroot应用于根元素的样式。

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

源代码

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