DateTimeFieldAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

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

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	小时选择时钟的 12 小时/24 小时视图。
autoFocus	bool	false	如果为 `true`，则在首次挂载期间 `input` 元素获得焦点。
clearable	bool	false	如果为 `true`，则字段中将显示清除按钮，允许清除值。
color	'error' \| 'info' \| 'primary' \| 'secondary' \| 'success' \| 'warning'	'primary'	组件的颜色。它支持默认主题颜色和自定义主题颜色，自定义主题颜色可以按照调色板自定义指南中所示的方式添加。
defaultValue	object	-	默认值。当组件不受控制时使用。
disabled	bool	false	如果为 `true`，则组件被禁用。
disableFuture	bool	false	如果为 `true`，则禁用日期组件的当前日期之后的值，时间组件的当前时间之后的值，以及日期时间组件的两者。
disableIgnoringDatePartForTimeValidation	bool	false	验证最小/最大时间时，不要忽略日期部分。
disablePast	bool	false	如果为 `true`，则禁用日期组件的当前日期之前的值，时间组件的当前时间之前的值，以及日期时间组件的两者。
focused	bool	-	如果为 `true`，则组件以聚焦状态显示。
format	string	-	在 input 中呈现的日期格式。
formatDensity	'dense' \| 'spacious'	"dense"	在 input 中呈现的格式密度。将 `formatDensity` 设置为 `"spacious"` 将在每个 `/`、`-` 和 `.` 字符前后添加空格。
FormHelperTextProps	object	-	应用于 `FormHelperText` 元素的 Props。
fullWidth	bool	false	如果为 `true`，则 input 将占据其容器的全部宽度。
helperText	node	-	辅助文本内容。
hiddenLabel	bool	false	如果为 `true`，则标签被隐藏。这用于增加 `FilledInput` 的密度。请务必向 `input` 元素添加 `aria-label`。
id	string	-	`input` 元素的 id。使用此 prop 可以使屏幕阅读器访问 `label` 和 `helperText`。
InputLabelProps	object	-	应用于 `InputLabel` 元素的 Props。当且仅当 `shrink` 为 `true` 时，才启用指针事件，如 `onClick`。
inputProps	object	-	应用于 `input` 元素的 Attributes。
InputProps	object	-	应用于 Input 元素的 Props。它将是 `FilledInput`、`OutlinedInput` 或 `Input` 组件，具体取决于 `variant` prop 值。
inputRef	ref	-	将 ref 传递给 `input` 元素。
label	node	-	标签内容。
margin	'dense' \| 'none' \| 'normal'	'none'	如果为 `dense` 或 `normal`，将调整此组件和包含组件的垂直间距。
maxDate	object	2099-12-31	最大可选择日期。
maxDateTime	object	-	最大可选择时间点，与日期绑定，要在每天设置最大时间，请使用 `maxTime`。
maxTime	object	-	最大可选择时间。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否则将忽略对象的日期部分。
minDate	object	1900-01-01	最小可选择日期。
minDateTime	object	-	最小可选择时间点，与日期绑定，要在每天设置最小时间，请使用 `minTime`。
minTime	object	-	最小可选择时间。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否则将忽略对象的日期部分。
minutesStep	number	1	分钟步长。
name	string	-	`input` 元素的 Name 属性。
onChange	func	-	当值更改时触发的回调。签名：`function(value: TValue, context: FieldChangeHandlerContext) => void` `value` 新值。 `context` 包含当前值的验证结果的上下文。
onClear	func	-	单击清除按钮时触发的回调。
onError	func	-	当与当前值关联的错误更改时触发的回调。当检测到验证错误时，`error` 参数包含非空值。这可以用于呈现适当的表单错误。签名：`function(error: TError, value: TValue) => void` `error` 当前值无效的原因。 `value` 与错误关联的值。
onSelectedSectionsChange	func	-	当选定的部分更改时触发的回调。签名：`function(newValue: FieldSelectedSections) => void` `newValue` 新的选定部分。
readOnly	bool	false	它阻止用户更改字段的值（而不是与字段交互）。
referenceDate	object	使用验证 props 的最接近的有效日期，回调（例如 `shouldDisableDate`）除外。值四舍五入到最精细的部分。	当 `value` 和 `defaultValue` 都为空时，用于生成格式中不存在的新值部分日期。例如，在时间字段上，它将用于确定要设置的日期。
required	bool	false	如果为 `true`，则标签显示为必填项，并且 `input` 元素为必填项。
selectedSections	'all' \| 'day' \| 'empty' \| 'hours' \| 'meridiem' \| 'minutes' \| 'month' \| 'seconds' \| 'weekDay' \| 'year' \| number	-	当前选定的部分。此 prop 接受四种格式： 1. 如果提供数字，则将选择此索引处的部分。 2. 如果提供 `FieldSectionType` 类型的字符串，则将选择具有该名称的第一个部分。 3. 如果提供 `"all"`，则将选择所有部分。 4. 如果提供 `null`，则不会选择任何部分。如果未提供，则选定的部分将在内部处理。
shouldDisableDate	func	-	禁用特定日期。警告：此函数可以多次调用（例如，当渲染日期日历、检查焦点是否可以移动到特定日期等时）。昂贵的计算会影响性能。签名：`function(day: TDate) => boolean` `day` 要测试的日期。返回：如果为 `true`，则日期将被禁用。
shouldDisableMonth	func	-	禁用特定月份。签名：`function(month: TDate) => boolean` `month` 要测试的月份。返回：如果为 `true`，则月份将被禁用。
shouldDisableTime	func	-	禁用特定时间。签名：`function(value: TDate, view: TimeView) => boolean` `value` 要检查的值。 `view` timeValue 的时钟类型。返回：如果为 `true`，则时间将被禁用。
shouldDisableYear	func	-	禁用特定年份。签名：`function(year: TDate) => boolean` `year` 要测试的年份。返回：如果为 `true`，则年份将被禁用。
shouldRespectLeadingZeros	bool	false	如果为 `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 中获取干净的值，则可以使用 `input.value.replace(/\u200e/g, '')` 删除此字符。警告 n°3：当在严格模式下使用时，dayjs 和 moment 需要尊重前导零。这意味着当使用 `shouldRespectLeadingZeros={false}` 时，如果您直接从 input 中检索值（不监听 `onChange`），并且您的格式包含没有前导零的标记，则该值将不会被您的库解析。
size	'medium' \| 'small'	-	组件的尺寸。
slotProps	object	{}	用于每个组件插槽的 props。
slots	object	{}	可覆盖的组件插槽。有关更多详细信息，请参见下面的插槽 API。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参见 `sx` 页面。
timezone	string	`value` 或 `defaultValue` prop 的时区被定义为 'default'，否则为 'system'。	选择要用于值的时区。示例："default"、"system"、"UTC"、"America/New_York"。如果您将来自其他时区的值传递给某些 props，它们将在使用前转换为此时区。有关更多详细信息，请参见时区文档。
unstableFieldRef	func \| object	-	用于以命令式方式与字段交互的 ref 对象。
value	object	-	选定的值。当组件受控时使用。
variant	'filled' \| 'outlined' \| 'standard'	'outlined'	要使用的变体。

ref 被转发到根元素。

主题默认 Props

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

CSS 类

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

类名	规则名称	描述
.MuiDateTimeField-root	root	应用于根元素的样式。

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

使用全局类名。
在自定义主题中使用规则名称作为组件的styleOverrides 属性的一部分。

源代码

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