Date / Time pickers
Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- On mobile, pickers are best suited for display in confirmation dialog.
- For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.
Native pickers
⚠️ Native input controls support by browsers isn't perfect.
Date picker
A native datepicker example with type="date".
<form noValidate>
<TextField
id="date"
label="Birthday"
type="date"
defaultValue="2017-05-24"
sx={{ width: 220 }}
InputLabelProps={{
shrink: true,
}}
/>
</form><form noValidate>
<TextField
id="datetime-local"
label="Next appointment"
type="datetime-local"
defaultValue="2017-05-24T10:30"
sx={{ width: 250 }}
InputLabelProps={{
shrink: true,
}}
/>
</form><form noValidate>
<TextField
id="time"
label="Alarm clock"
type="time"
defaultValue="07:30"
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
sx={{ width: 150 }}
/>
</form>