Skip to content

ClockPicker API

API documentation for the React ClockPicker component. Learn about the available props and the CSS API.

Import

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

Component name

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

Props

NameTypeDefaultDescription
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
The components used for each slot. Either a string to use an HTML element or a component.
componentsPropsobject
The props used for each slot inside.
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.

The ref is forwarded to the root element.

CSS

Rule nameGlobal classDescription
root.MuiClockPicker-rootStyles applied to the root element.
arrowSwitcher.MuiClockPicker-arrowSwitcherStyles applied to the arrowSwitcher element.

You can override the style of the component using one of these customization options:

Demos