ClockPicker API

想要学习更多组件属性和 CSS API，可以查阅 React ClockPicker 组件的 API 文档。

导入

import ClockPicker from '@mui/lab/ClockPicker';
// 或
import { ClockPicker } from '@mui/lab';

您可以通过阅读本指南以最小化捆包大小来了解这种差异。

组件名称

The name MuiClockPicker can be used when providing default props or style overrides in the theme.

属性

名称	类型	默认值	描述
date^*	any		Selected date @DateIOType.
onChange^*	func		On change callback @DateIOType.
ampm	bool	false	12h/24h view for hour selection clock.
ampmInClock	bool	false	Display ampm controls under the clock (instead of in the toolbar).
autoFocus	bool	false	Set to `true` if focus should be moved to clock picker.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
components	{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType }		The components used for each slot. Either a string to use a HTML element or a component.
componentsProps	{ leftArrowButton?: object, rightArrowButton?: object }		The props used for each slot inside.
disableIgnoringDatePartForTimeValidation	bool	false	Do not ignore date part when validating min/max time.
getClockLabelText	func	<TDate extends any>( view: ClockView, time: TDate \| null, adapter: MuiPickersAdapter<TDate>, ) => `Select ${view}. ${ time === null ? 'No time selected' : `Selected time is ${adapter.format(time, 'fullTime')}` }`	Accessible text that helps user to understand which time and view is selected.
getHoursClockNumberText	func	(hours: string) => `${hours} hours`	Get clock number aria-text for hours.
getMinutesClockNumberText	func	(minutes: string) => `${minutes} minutes`	Get clock number aria-text for minutes.
getSecondsClockNumberText	func	(seconds: string) => `${seconds} seconds`	Get clock number aria-text for seconds.
leftArrowButtonText	string	'open previous view'	Left arrow icon aria-label text.
maxTime	any		Max time acceptable time. For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
minTime	any		Min time acceptable time. For input validation date part of passed object will be ignored if `disableIgnoringDatePartForTimeValidation` not specified.
minutesStep	number	1	Step over minutes.
rightArrowButtonText	string	'open next view'	Right arrow icon aria-label text.
shouldDisableTime	func		Dynamically check if time is disabled or not. If returns `false` appropriate time point will ot be acceptable.

ref 则会被传递到根元素中。

CSS

规则名称	全局类名	描述
arrowSwitcher	.MuiClockPicker-arrowSwitcher	Styles applied to the arrowSwitcher element.

您可以使用组件自定义选项对组件进行个性化：

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

演示项目

Time Picker