跳到内容

SingleInputDateTimeRangeFieldAPI

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

演示

导入

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

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

Props

原生组件的 Props 也可用。

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

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

autoFocusboolfalse

如果为 true,则在首次挂载期间聚焦 input 元素。

clearableboolfalse

如果为 true,则字段中将显示清除按钮,允许清除值。

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

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

dateSeparatorstring"–"

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

defaultValueArray<object>-

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

disabledboolfalse

如果为 true,则组件被禁用。

disableFutureboolfalse

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

disableIgnoringDatePartForTimeValidationboolfalse

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

disablePastboolfalse

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

focusedbool-

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

formatstring-

在 input 中呈现的日期格式。

formatDensity'dense'
| 'spacious'
"dense"

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

FormHelperTextPropsobject-

应用于 FormHelperText 元素的 Props。

fullWidthboolfalse

如果为 true,则 input 将占据其容器的完整宽度。

helperTextnode-

辅助文本内容。

hiddenLabelboolfalse

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

idstring-

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

InputLabelPropsobject-

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

inputPropsobject-

应用于 input 元素的属性

InputPropsobject-

应用于 Input 元素的 Props。它将是 FilledInputOutlinedInputInput 组件,具体取决于 variant prop 值。

inputRefref-

将 ref 传递给 input 元素。

labelnode-

标签内容。

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

如果为 densenormal,将调整此组件和包含组件的垂直间距。

maxDateobject2099-12-31

最大可选日期。

maxDateTimeobject-

最大可选时间时刻,与日期绑定,要在每天设置最大时间,请使用 maxTime

maxTimeobject-

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

minDateobject1900-01-01

最小可选日期。

minDateTimeobject-

最小可选时间时刻,与日期绑定,要在每天设置最小时间,请使用 minTime

minTimeobject-

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

minutesStepnumber1

分钟步长。

namestring-

input 元素的 Name 属性。

onChangefunc-

当值更改时触发的回调。

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

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

onErrorfunc-

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

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

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

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

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

referenceDateobject使用验证 props 的最接近的有效日期,除了诸如 `shouldDisableDate` 之类的回调。值四舍五入到最精细的部分。

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

requiredboolfalse

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

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

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

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} 时,字段将在包含单个数字的 section 上添加一个不可见字符,以确保触发 onChange。如果您需要从 input 获取干净的值,则可以使用 input.value.replace(/\u200e/g, '') 删除此字符。
警告 n°3:当在严格模式下使用时,dayjs 和 moment 要求尊重前导零。这意味着当使用 shouldRespectLeadingZeros={false} 时,如果您直接从 input 中检索值(不监听 onChange)并且您的格式包含没有前导零的令牌,则您的库将无法解析该值。

size'medium'
| 'small'
-

组件的大小。

slotPropsobject{}

用于每个组件 slot 的 props。

slotsobject{}

可覆盖的组件 slot。

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

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

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

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

timezonestring定义 valuedefaultValue prop 的时区,否则为“default”。

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

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

unstableFieldReffunc
| object
-

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

valueArray<object>-

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

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

要使用的变体。

ref 被转发到根元素。

主题默认 Props

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

CSS 类

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

类名规则名描述
.MuiSingleInputDateTimeRangeField-rootroot应用于根元素的样式。

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

源代码

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