The component is built using the
DateTimeField for the keyboard editing, the
DateCalendar for the date view editing, the
DigitalClock for the desktop view editing, and the
TimeClock for the mobile time view editing.
All the documented props of those four components can also be passed to the Date Time Picker component.
Check-out their documentation page for more information:
The value of 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 use the
viewRenderers prop to change the view that is used for rendering a view.
You might be interested in using the Time Clock instead of the Digital Clock or removing the time view rendering altogether in favor of only using the field to input the time.
You can find the documentation in the Validation page.