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



Override or extend the styles applied to the component.

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

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
.MuiDateRangePickerToolbar-containercontainerStyles applied to the container element.
.MuiDateRangePickerToolbar-rootrootStyles applied to the root element.

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