Component composition
The component is built using the TimeField for the keyboard editing and the TimeClock for the view editing.
All the documented props of those two components can also be passed to the Time Picker component.
Check-out their documentation page for more information:
Uncontrolled vs. Controlled
The component can be uncontrolled or controlled.
Available components
The component is available in four variants:
The
DesktopTimePickercomponent which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.The
MobileTimePickercomponent 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.The
TimePickercomponent which rendersDesktopTimePickerorMobileTimePickerdepending on the device it runs on.The
StaticTimePickercomponent which renders without the popover/modal and field.
Desktop variant
Mobile variant
Responsive variant
Static variant
By default, the TimePicker component renders the desktop version if the media query @media (pointer: fine) matches.
This can be customized with the desktopModeMediaQuery prop.
Form props
The component can be disabled or read-only.
Views
The component supports three views: hours, minutes and seconds.
By default, the hours and minutes views are enabled.
Use the views prop to change this behavior:
By default, the component renders the hours view on mount.
Use the openTo prop to change this behavior:
Landscape orientation
By default, the Time Picker component automatically sets the orientation based on the window.orientation value.
You can force a specific orientation using the orientation prop.
Validation
You can find the documentation in the Validation page