The component is built using the
DateTimeField for the keyboard editing, the
DateCalendar for the date view editing and the
TimeClock for the time view editing.
All the documented props of those three components can also be passed to the Date Time Picker component.
Check-out their documentation page for more information:
Uncontrolled vs. Controlled
The component can be uncontrolled or controlled.
The component is available in four variants:
DesktopDateTimePickercomponent which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.
MobileDateTimePickercomponent which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.
DateTimePickercomponent which renders
MobileDateTimePickerdepending on the device it runs on.
StaticDateTimePickercomponent which renders without the popover/modal and field.
By default, the
DateTimePicker component renders the desktop version if the media query
@media (pointer: fine) matches.
This can be customized with the
The component can be disabled or read-only.
The component supports six views:
By default, the
minutes views are enabled.
views prop to change this behavior:
"year"", "month", "day", "hours", "minutes" and "seconds"
"year", "day", "hours", "minutes", "seconds"
By default, the component renders the
day view on mount.
openTo prop to change this behavior:
By default, the Date Time Picker component automatically sets the orientation based on the
You can force a specific orientation using the
You can find the documentation in the Validation page
You can find the documentation about localization in the Date localization and Component localization.
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.