Time Picker
Time pickers allow the user to select a single time.
Time pickers allow the user to select a single time (in the hours:minutes format). The selected time is indicated by the filled circle at the end of the clock hand.
Basic usage
The time picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<TimePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>Static mode
It's possible to render any time picker inline. This will enable building custom popover/modal containers.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticTimePicker
displayStaticWrapperAs="mobile"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>Responsiveness
The time picker component is designed and optimized for the device it runs on.
- The
MobileTimePickercomponent works best for touch devices and small screens. - The
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 desktopModeMediaQuery prop.
Localization
Use LocalizationProvider to change the date-engine locale that is used to render the time picker.
The time picker will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format.
This can be overridden with ampm prop.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticTimePicker
ampm
orientation="landscape"
openTo="minutes"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>Sub-components
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.).
<LocalizationProvider dateAdapter={AdapterDateFns}>
<ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>