ClockPicker API

Documentação da API para o componente React ClockPicker . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

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

Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

Nome	Tipo	Padrão	Descrição
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		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regra	Classe global	Descrição
arrowSwitcher	.MuiClockPicker-arrowSwitcher	Estilos aplicados a the arrowSwitcher element.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Com um nome de classe global.
Com um nome de regra como parte da propriedade styleOverrides do componente em um tema personalizado.

Demonstrações

Time Picker