Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

DateTimePickerToolbar API

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

Demos

For examples and details on the usage of this React component, visit the component demo pages:

    Import

    import { DateTimePickerToolbar } from '@mui/x-date-pickers-pro';
// or
import { DateTimePickerToolbar } from '@mui/x-date-pickers';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

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

    Props

    NameTypeDefaultDescription
    onViewChange*func
    Callback called when a toolbar is clicked

    Signature:
    function(view: TView) => void
    view: The view to open
    view*'day'
    | 'hours'
    | 'minutes'
    | 'month'
    | 'seconds'
    | 'year'
    Currently visible picker view.
    classesobject
    Override or extend the styles applied to the component. See CSS API below for more details.
    classNamestring
    className applied to the root component.
    hiddenbool`true` for Desktop, `false` for Mobile.
    If true, show the toolbar even in desktop mode.
    toolbarFormatstring
    Toolbar date format.
    toolbarPlaceholdernode"––"
    Toolbar value placeholder—it is displayed when the value is empty.

    The component cannot hold a ref.

    CSS

    Rule nameGlobal classDescription
    root.MuiDateTimePickerToolbar-rootStyles applied to the root element.
    dateContainer.MuiDateTimePickerToolbar-dateContainerStyles applied to the date container element.
    timeContainer.MuiDateTimePickerToolbar-timeContainerStyles applied to the time container element.
    timeDigitsContainer.MuiDateTimePickerToolbar-timeDigitsContainerStyles applied to the time (except am/pm) container element.
    timeLabelReverse.MuiDateTimePickerToolbar-timeLabelReverseStyles applied to the time container if rtl.
    separator.MuiDateTimePickerToolbar-separatorStyles applied to the separator element.
    ampmSelection.MuiDateTimePickerToolbar-ampmSelectionStyles applied to the am/pm section.
    ampmLandscape.MuiDateTimePickerToolbar-ampmLandscapeStyles applied to am/pm section in landscape mode.
    ampmLabel.MuiDateTimePickerToolbar-ampmLabelStyles applied to am/pm labels.

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