Date time picker
This component combines the date & time pickers.
It allows the user to select both date and time with the same control.
Allows choosing date then time. There are 4 steps available (year, date, hour and minute), so tabs are required to visually distinguish date/time steps.
DateTimePicker component is designed and optimized for the device it runs on.
MobileDateTimePickercomponent works best for touch devices and small screens.
DesktopDateTimePickercomponent works best for mouse devices and large screens.
By default, the
DateTimePicker component renders the desktop version if the media query
@media (pointer: fine) matches.
This can be customized with the
There are certain caveats when testing pickers, please refer to this section for more information.
It is possible to restrict date and time selection in two ways:
- by using
maxDateTimeits possible to restrict time selection to before or after a particular moment in time
maxTime, you can disable selecting times before or after a certain time each day respectively
It's possible to render any date & time picker inline. This will enable building custom popover/modal containers.
Hardcoded helper text
Clear Initial State