跳到内容

MultiInputDateTimeRangeFieldAPI

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

演示

导入

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

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

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" 将在每个 /、- 和 . 字符前后添加一个空格。

maxDateobject2099-12-31

最大可选日期。

maxDateTimeobject-

最大可选时间点，绑定到日期，要在每天设置最大时间，请使用 maxTime。

maxTimeobject-

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

minDateobject1900-01-01

最小可选日期。

minDateTimeobject-

最小可选时间点，绑定到日期，要在每天设置最小时间，请使用 minTime。

minTimeobject-

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

minutesStepnumber1

分钟步长。

onChangefunc-

值更改时触发的回调。

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

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

签名：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，则不选择任何部分。如果未提供，则选定的部分将在内部处理。

shouldDisableDatefunc-

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

签名：function(day: TDate, position: string) => boolean
  • day 要测试的日期。
  • position 要测试的日期，'start' 或 'end'。

返回： 如果日期应禁用，则返回 true。

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{}

可覆盖的组件插槽。

有关更多详细信息，请参见下方的 插槽 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

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

CSS 类

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

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

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

源代码

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