Skip to content

DateTimeRangePickerTabs API

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



import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro/DateTimeRangePicker';
// or
import { DateTimeRangePickerTabs } from '@mui/x-date-pickers-pro';

Learn about the difference by reading this guide on minimizing bundle size.



Callback called when a tab is clicked.

Signature:function(view: TView) => void
  • view The view to open
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'year'

Currently visible picker view.


Override or extend the styles applied to the component.

See CSS classes API below for more details.


Date tab icon.

hiddenbool`window.innerHeight < 667` for `DesktopDateTimeRangePicker` and `MobileDateTimeRangePicker`

Toggles visibility of the tabs allowing view switching.

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


Time tab icon.

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
.MuiDateTimeRangePickerTabs-fillerfillerStyles applied to the filler element, shown instead of a navigation arrow.
.MuiDateTimeRangePickerTabs-navigationButtonnavigationButtonStyles applied to the tab navigation button elements.
.MuiDateTimeRangePickerTabs-rootrootStyles applied to the root element.
.MuiDateTimeRangePickerTabs-tabButtontabButtonStyles applied to the tab button element.

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