跳转到内容

ClockPicker API

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

导入

import ClockPicker from '@mui/x-date-pickers-pro/ClockPicker';
// 或
import ClockPicker from '@mui/x-date-pickers/ClockPicker';
// 或
import { ClockPicker } from '@mui/x-date-pickers-pro';
// 或
import { ClockPicker } from '@mui/x-date-pickers';
You can learn about the difference by reading this guide on minimizing bundle size.

组件名称

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.
ampmboolfalse
12h/24h view for hour selection clock.
ampmInClockboolfalse
Display ampm controls under the clock (instead of in the toolbar).
autoFocusboolfalse
Set to true if focus should be moved to clock picker.
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
componentsobject{}
Overrideable components.
componentsPropsobject{}
The props used for each component slot.
disabledboolfalse
If true, the picker and text field are disabled.
disableIgnoringDatePartForTimeValidationboolfalse
Do not ignore date part when validating min/max time.
getClockLabelTextfunc<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.

Signature:
function(view: ClockPickerView, time: TDate | null, adapter: MuiPickersAdapter<TDate>) => string
view: The current view rendered.
time: The current time.
adapter: The current date adapter.
returns (string): The clock label.
getHoursClockNumberTextfunc(hours: string) => `${hours} hours`
Get clock number aria-text for hours.

Signature:
function(hours: string) => string
hours: The hours to format.
returns (string): the formatted hours text.
getMinutesClockNumberTextfunc(minutes: string) => `${minutes} minutes`
Get clock number aria-text for minutes.

Signature:
function(minutes: string) => string
minutes: The minutes to format.
returns (string): the formatted minutes text.
getSecondsClockNumberTextfunc(seconds: string) => `${seconds} seconds`
Get clock number aria-text for seconds.

Signature:
function(seconds: string) => string
seconds: The seconds to format.
returns (string): the formatted seconds text.
leftArrowButtonTextstring'open previous view'
Left arrow icon aria-label text.
maxTimeany
Max time acceptable time. For input validation date part of passed object will be ignored if disableIgnoringDatePartForTimeValidation not specified.
minTimeany
Min time acceptable time. For input validation date part of passed object will be ignored if disableIgnoringDatePartForTimeValidation not specified.
minutesStepnumber1
Step over minutes.
onViewChangefunc
Callback fired on view change.

Signature:
function(view: ClockPickerView) => void
view: The new view.
openTo'hours'
| 'minutes'
| 'seconds'
'hours'
Initially open view.
readOnlyboolfalse
Make picker read only.
rightArrowButtonTextstring'open next view'
Right arrow icon aria-label text.
shouldDisableTimefunc
Dynamically check if time is disabled or not. If returns false appropriate time point will ot be acceptable.

Signature:
function(timeValue: number, clockType: ClockPickerView) => boolean
timeValue: The value to check.
clockType: The clock type of the timeValue.
returns (boolean): Returns true if the time should be disabled
view'hours'
| 'minutes'
| 'seconds'
Controlled open view.
viewsArray<'hours'
| 'minutes'
| 'seconds'>
['hours', 'minutes']
Views for calendar picker.

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

CSS

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

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

演示项目