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.

Component demos

Import

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.

Props

onViewChangeRequired

Callback called when a toolbar is clicked

Type:func

Signature:
function(view: TView) => void
  • view The view to open
viewRequired

Currently visible picker view.

Type:'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

className

className applied to the root component.

Type:string

hidden

If true, show the toolbar even in desktop mode.

Type:bool

Default:`true` for Desktop, `false` for Mobile.

toolbarFormat

Toolbar date format.

Type:string

toolbarPlaceholder

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

Type:node

Default:"––"

The component cannot hold a ref.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiDateTimePickerToolbar-root

Styles applied to the root element.

Rule name:root

.MuiDateTimePickerToolbar-dateContainer

Styles applied to the date container element.

Rule name:dateContainer

.MuiDateTimePickerToolbar-timeContainer

Styles applied to the time container element.

Rule name:timeContainer

.MuiDateTimePickerToolbar-timeDigitsContainer

Styles applied to the time (except am/pm) container element.

Rule name:timeDigitsContainer

.MuiDateTimePickerToolbar-timeLabelReverse

Styles applied to the time container if rtl.

Rule name:timeLabelReverse

.MuiDateTimePickerToolbar-separator

Styles applied to the separator element.

Rule name:separator

.MuiDateTimePickerToolbar-ampmSelection

Styles applied to the am/pm section.

Rule name:ampmSelection

.MuiDateTimePickerToolbar-ampmLandscape

Styles applied to am/pm section in landscape mode.

Rule name:ampmLandscape

.MuiDateTimePickerToolbar-ampmLabel

Styles applied to am/pm labels.

Rule name:ampmLabel


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