Saltar al contenido

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';
// o
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

NombreTipoPor defectoDescripción
date*anySelected date @DateIOType.
onChange*funcOn change callback @DateIOType.
allowKeyboardControlboolfalseEnables keyboard listener for moving between days in calendar. Defaults to true unless the ClockPicker is used inside a Static* picker component.
ampmboolfalse12h/24h view for hour selection clock.
ampmInClockboolfalseDisplay ampm controls under the clock (instead of in the toolbar).
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.
componentsPropsobjectThe props used for each slot inside.
disableIgnoringDatePartForTimeValidationboolfalseDo not ignore date part when validating min/max time.
getClockLabelTextfunc<TDate extends any>( view: ClockView, time: TDate, adapter: MuiPickersAdapter<TDate>, ) => `Select ${view}. 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.
maxTimeanyMax time acceptable time. For input validation date part of passed object will be ignored if disableIgnoringDatePartForTimeValidation not specified.
minTimeanyMin time acceptable time. For input validation date part of passed object will be ignored if disableIgnoringDatePartForTimeValidation not specified.
minutesStepnumber1Step over minutes.
rightArrowButtonTextstring'open next view'Right arrow icon aria-label text.
shouldDisableTimefuncDynamically 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 classDescripción
arrowSwitcher.MuiClockPicker-arrowSwitcher

You can override the style of the component using one of these customization options: If that isn't sufficient, you can check the implementation of the component for more detail.

Demos