Time pickers allow the user to select a single time.
The selected time is indicated by the filled circle at the end of the clock hand.
The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
It's possible to render any time picker inline. This will enable building custom popover/modal containers.
The time picker component is designed and optimized for the device it runs on.
MobileTimePickercomponent works best for touch devices and small screens.
DesktopTimePickercomponent works best for mouse devices and large screens.
By default, the
TimePicker 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.
Some lower-level sub-components (
ClockPicker) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).