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.
Requirements
This component relies on the date management library of your choice. It supports date-fns, luxon, dayjs, moment and any other library via a public dateAdapter interface.
Please install any of these libraries and set up the right date engine by wrapping your root (or the highest level you wish the pickers to be available) with LocalizationProvider:
// or @material-ui/lab/dateAdapter/{dayjs,luxon,moment} or any valid date-io adapter
import DateFnsAdapter from '@material-ui/lab/dateAdapter/date-fns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
function App() {
return (
<LocalizationProvider dateAdapter={DateFnsAdapter}>
...
</LocalizationProvider>
);
}Basic usage
The time picker will automatically adjust to the locale's time setting, i.e. the 12-hour or 24-hour format. This can be controlled with ampm prop.
Localization
Use LocalizationProvider to change the date-engine locale that is used to render the time picker. Note that am/pm setting is switched automatically:
Responsiveness
The time picker component is designed and optimized for the device it runs on.
- The "Mobile" version works best for touch devices and small screens.
- The "Desktop" version works best for mouse devices and large screens.
By default, the TimePicker component uses a @media (pointer: fine) media query to determine which version to use.
This can be customized with the desktopModeMediaQuery prop.
hh:mm (a|p)m
Static mode
It's possible to render any picker inline. This will enable building custom popover/modal containers.
1
2
3
4
5
6
7
8
9
10
11
12
<LocalizationProvider dateAdapter={DateFnsAdapter}>
<StaticTimePicker
displayStaticWrapperAs="mobile"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>05
10
15
20
25
30
35
40
45
50
55
00
<LocalizationProvider dateAdapter={DateFnsAdapter}>
<StaticTimePicker
ampm
orientation="landscape"
openTo="minutes"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>