跳到内容

MultiInputDateRangeFieldAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

名称类型默认值描述
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，则禁用日期组件的当前日期之后的值，时间组件的时间以及日期时间组件的两者。

disablePastboolfalse

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

dividernode-

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

formatstring-

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

formatDensity'dense'
| 'spacious'		"dense"

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

maxDateobject2099-12-31

最大可选择日期。

minDateobject1900-01-01

最小可选择日期。

onChangefunc-

当值更改时触发的回调。

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

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

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

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

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

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

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

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

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

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

shouldDisableDatefunc-

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

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

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

shouldRespectLeadingZerosboolfalse

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

slotPropsobject{}

用于每个组件 slot 的 props。

slotsobject{}

可覆盖的组件 slots。

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

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

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

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

系统 prop，允许定义系统 overrides 以及其他 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

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

CSS 类

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

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

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

源代码

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