Skip to content

DateTimePickerTabs API

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

Component name

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

Props

NameTypeDefaultDescription
onViewChange*func
Callback called when a tab 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.
dateIconnodeDateRange
Date tab icon.
hiddenbool`window.innerHeight < 667` for `DesktopDateTimePicker` and `MobileDateTimePicker`, `displayStaticWrapperAs === 'desktop'` for `StaticDateTimePicker`
Toggles visibility of the tabs allowing view switching.
timeIconnodeTime
Time tab icon.

The component cannot hold a ref.

CSS

Rule nameGlobal classDescription
root.MuiDateTimePickerTabs-rootStyles applied to the root element.

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