MultiSectionDigitalClockAPI

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

演示

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

导入

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

阅读这份关于最小化 bundle 大小的指南，了解其区别。reading this guide on minimizing bundle size.

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
ampm	bool	utils.is12HourCycleInCurrentLocale()	用于小时选择时钟的 12 小时制/24 小时制视图。
autoFocus	bool	-	如果为 `true`，则在首次挂载期间，主元素将获得焦点。此主元素是：- 可见视图选择的元素（如果有）（即：`day` 视图上选定的日期）。- 如果渲染了字段，则为 `input` 元素。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参阅下面的 CSS 类 API。CSS classes API below for more details.
defaultValue	object	-	默认选定值。当组件不受控制时使用。
disabled	bool	false	如果为 `true`，则禁用选择器视图和文本字段。
disableFuture	bool	false	如果为 `true`，则禁用日期组件的当前日期之后的值，时间组件的当前时间之后的值，以及日期时间组件的两者之后的值。
disableIgnoringDatePartForTimeValidation	bool	false	验证最小/最大时间时，请勿忽略日期部分。
disablePast	bool	false	如果为 `true`，则禁用日期组件的当前日期之前的值，时间组件的当前时间之前的值，以及日期时间组件的两者之前的值。
focusedView	'hours' \| 'meridiem' \| 'minutes' \| 'seconds'	-	受控的焦点视图。
maxTime	object	-	最大可选时间。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否则将忽略对象的日期部分。
minTime	object	-	最小可选时间。除非 `props.disableIgnoringDatePartForTimeValidation === true`，否则将忽略对象的日期部分。
minutesStep	number	1	分钟步长。
onChange	func	-	值更改时触发的回调。 Signature:`function(value: TValue, selectionState: PickerSelectionState \| undefined, selectedView: TView \| undefined) => void` `value` 新值。 `selectionState` 指示日期选择是否完成。 `selectedView` 指示在哪个视图中进行了选择。
onFocusedViewChange	func	-	焦点视图更改时触发的回调。 Signature:`function(view: TView, hasFocus: boolean) => void` `view` 要聚焦或不聚焦的新视图。 `hasFocus` 如果视图应聚焦，则为 `true`。
onViewChange	func	-	视图更改时触发的回调。 Signature:`function(view: TView) => void` `view` 新视图。
openTo	'hours' \| 'meridiem' \| 'minutes' \| 'seconds'	-	默认可见视图。当组件视图不受控制时使用。必须是 `views` 列表中的有效选项。
readOnly	bool	false	如果为 `true`，则选择器视图和文本字段为只读。
referenceDate	object	使用验证 props 的最接近的有效时间，但 `shouldDisableTime` 等回调除外。	当 `value` 和 `defaultValue` 都为空时，用于生成新值的日期。
shouldDisableTime	func	-	禁用特定时间。 Signature:`function(value: TDate, view: TimeView) => boolean` `value` 要检查的值。 `view` timeValue 的时钟类型。 Returns: 如果为 `true`，则将禁用时间。
skipDisabled	bool	false	如果为 `true`，则不会渲染禁用的数字时钟项。
slotProps	object	{}	用于每个组件 slot 的 props。
slots	object	{}	可覆盖的组件 slot。有关更多详细信息，请参阅下面的 Slots API。Slots API below for more details.
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参阅 `sx` 页面。
timeSteps	{ hours?: number, minutes?: number, seconds?: number }	{ hours: 1, minutes: 5, seconds: 5 }	两个时间单位选项之间的时间步长。例如，如果 `timeStep.minutes = 8`，则可用的分钟选项将为 `[0, 8, 16, 24, 32, 40, 48, 56]`。
timezone	string	定义 `value` 或 `defaultValue` prop 的时区，否则为 'default'。	选择用于值的时区。示例：“default”、“system”、“UTC”、“America/New_York”。如果您将来自其他时区的值传递给某些 props，它们将在使用前转换为此时区。有关更多详细信息，请参阅时区文档。
value	object	-	选定的值。当组件受控制时使用。
view	'hours' \| 'meridiem' \| 'minutes' \| 'seconds'	-	可见视图。当组件视图受控制时使用。必须是 `views` 列表中的有效选项。
views	Array<'hours' \| 'meridiem' \| 'minutes' \| 'seconds'>	['hours', 'minutes']	可用视图。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiMultiSectionDigitalClock 通过主题更改此组件的默认 props。with the theme.

Slots

Slot 名称	类名	默认组件	描述
digitalClockSectionItem		`MenuItem from '@mui/material'`	负责渲染单个多段数字时钟段项目的组件。

CSS 类

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

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

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

使用全局类名。global class name.
在自定义主题中，使用作为组件 styleOverrides property一部分的规则名称。

源代码

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