Skip to content

DateRangePickerToolbar API

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

Component demos

Import

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

Props

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.

.MuiDateRangePickerToolbar-root

Styles applied to the root element.

Rule name:root

.MuiDateRangePickerToolbar-container

Styles applied to the container element.

Rule name:container


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