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 '@material-ui/lab/ClockPicker';
// or
import { ClockPicker } from '@material-ui/lab';
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.
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.
componentsPropsobject
The props used for each slot inside.
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.
getHoursClockNumberTextfunc(hours: string) => `${hours} hours`
Get clock number aria-text for hours.
getMinutesClockNumberTextfunc(minutes: string) => `${minutes} minutes`
Get clock number aria-text for minutes.
getSecondsClockNumberTextfunc(seconds: string) => `${seconds} seconds`
Get clock number aria-text for seconds.
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.
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.

The ref is forwarded to the root element.

CSS

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

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

Demos