Skip to content
Edit this page

TimePickerToolbar API

API reference docs for the React TimePickerToolbar 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 { TimePickerToolbar } from '@mui/x-date-pickers-pro';
// or
import { TimePickerToolbar } from '@mui/x-date-pickers';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

    The name MuiTimePickerToolbar 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*'hours'
    | 'minutes'
    | 'seconds'
    Currently visible picker view.
    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.MuiTimePickerToolbar-root
    separator.MuiTimePickerToolbar-separator
    hourMinuteLabel.MuiTimePickerToolbar-hourMinuteLabel
    hourMinuteLabelLandscape.MuiTimePickerToolbar-hourMinuteLabelLandscape
    hourMinuteLabelReverse.MuiTimePickerToolbar-hourMinuteLabelReverse
    ampmSelection.MuiTimePickerToolbar-ampmSelection
    ampmLandscape.MuiTimePickerToolbar-ampmLandscape
    ampmLabel.MuiTimePickerToolbar-ampmLabel

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