Skip to content

DateTimePickerToolbar API

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



import { DateTimePickerToolbar } from '@mui/x-date-pickers/DateTimePicker';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers-pro';

Learn about the difference by reading this guide on minimizing bundle size.



Callback called when a toolbar is clicked

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

Available views.


Override or extend the styles applied to the component.

See CSS classes API below for more details.

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

If true, show the toolbar even in desktop mode.

| 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.


Toolbar date format.


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


If provided, it will be used instead of dateTimePickerToolbarTitle from localization.

| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'

Currently visible picker view.

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
.MuiDateTimePickerToolbar-ampmLabelampmLabelStyles applied to am/pm labels.
.MuiDateTimePickerToolbar-ampmLandscapeampmLandscapeStyles applied to am/pm section in landscape mode.
.MuiDateTimePickerToolbar-ampmSelectionampmSelectionStyles applied to the am/pm section.
.MuiDateTimePickerToolbar-dateContainerdateContainerStyles applied to the date container element.
.MuiDateTimePickerToolbar-rootrootStyles applied to the root element.
.MuiDateTimePickerToolbar-separatorseparatorStyles applied to the separator element.
.MuiDateTimePickerToolbar-timeContainertimeContainerStyles applied to the time container element.
.MuiDateTimePickerToolbar-timeDigitsContainertimeDigitsContainerStyles applied to the time (except am/pm) container element.
.MuiDateTimePickerToolbar-timeLabelReversetimeLabelReverseStyles applied to the time container if rtl.

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