Skip to content

TimePickerToolbar API

API reference docs for the React TimePickerToolbar component. Learn about the props, CSS, and other APIs of this exported module.

Component demos

Import

import { TimePickerToolbar } from '@mui/x-date-pickers/TimePicker';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers-pro';
Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
onViewChange*func-

Callback called when a toolbar is clicked

Signature:function(view: TView) => void
  • view The view to open
view*'hours'
| 'meridiem'
| 'minutes'
| 'seconds'
-

Currently visible picker view.

views*Array<'hours'
| 'meridiem'
| 'minutes'
| 'seconds'>
-

Available views.

classesobject-

Override or extend the styles applied to the component.

See CSS API below for more details.

hiddenbool`true` for Desktop, `false` for Mobile.

If true, show the toolbar even in desktop mode.

sxArray<func
| object
| bool>
| func
| object
-

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

toolbarFormatstring-

Toolbar date format.

toolbarPlaceholdernode"––"

Toolbar value placeholder—it is displayed when the value is empty.

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class nameRule nameDescription
.MuiTimePickerToolbar-ampmLabelampmLabelStyles applied to the meridiem label element.
.MuiTimePickerToolbar-ampmLandscapeampmLandscapeStyles applied to the meridiem selection element in landscape mode.
.MuiTimePickerToolbar-ampmSelectionampmSelectionStyles applied to the meridiem selection element.
.MuiTimePickerToolbar-hourMinuteLabelhourMinuteLabelStyles applied to the time sections element.
.MuiTimePickerToolbar-hourMinuteLabelLandscapehourMinuteLabelLandscapeStyles applied to the time sections element in landscape mode.
.MuiTimePickerToolbar-hourMinuteLabelReversehourMinuteLabelReverseStyles applied to the time sections element in "rtl" theme mode.
.MuiTimePickerToolbar-rootrootStyles applied to the root element.
.MuiTimePickerToolbar-separatorseparatorStyles applied to the separator element.

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