跳到内容

MultiInputTimeRangeFieldAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

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

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

autoFocusbool-

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

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的CSS 类 API。

dateSeparatorstring"–"

在开始日期和结束日期之间显示的字符串。

defaultValueArray<object>-

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

direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object		'column'

定义 flex-direction 样式属性。它适用于所有屏幕尺寸。

disabledboolfalse

如果为 true，则组件将被禁用。

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disablePastboolfalse

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

dividernode-

在每个子项之间添加一个元素。

formatstring-

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

formatDensity'dense'
| 'spacious'		"dense"

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

maxTimeobject-

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

minTimeobject-

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

minutesStepnumber1

分钟步长。

onChangefunc-

值更改时触发的回调。

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

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

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

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

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

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

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

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

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

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

shouldDisableTimefunc-

禁用特定时间。

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

返回： 如果为 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）并且您的格式包含没有前导零的令牌，则您的库将无法解析该值。

slotPropsobject{}

用于每个组件插槽的 props。

slotsobject{}

可覆盖的插槽。

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

spacingArray<number
| string>
| number
| object
| string		0

定义直接子元素之间的间距。

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

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

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

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

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

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

useFlexGapboolfalse

如果为 true，则使用 CSS flexbox gap 而不是将 margin 应用于子元素。
虽然 CSS gap 消除了已知的限制，但在某些浏览器中尚未完全支持。我们建议在使用此标志之前检查 https://caniuse.cn/?search=flex%20gap。
要全局启用此标志，请遵循主题的默认 props 配置。

valueArray<object>-

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

ref 被转发到根元素。

主题默认 props

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

CSS 类

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

类名规则名称描述
.MuiMultiInputTimeRangeField-rootroot应用于根元素的样式。
.MuiMultiInputTimeRangeField-separatorseparator应用于分隔符元素的样式。

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

源代码

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