Skip to content
Edit this page

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.

@material-ui/pickers

stars npm downloads

@material-ui/pickers provides date picker and time picker controls.

Native pickers

⚠️ Native input controls support by browsers isn't perfect. Have a look at @material-ui/pickers for a richer solution.

Datepickers

A native datepicker example with type="date".

<form className={classes.container} noValidate> <TextField id="date" label="Birthday" type="date" defaultValue="2017-05-24" className={classes.textField} InputLabelProps={{ shrink: true, }} /> </form>

Date & Time pickers

A native date & time picker example with type="datetime-local".

<form className={classes.container} noValidate> <TextField id="datetime-local" label="Next appointment" type="datetime-local" defaultValue="2017-05-24T10:30" className={classes.textField} InputLabelProps={{ shrink: true, }} /> </form>

Time pickers

A native time picker example with type="time".

<form className={classes.container} noValidate> <TextField id="time" label="Alarm clock" type="time" defaultValue="07:30" className={classes.textField} InputLabelProps={{ shrink: true, }} inputProps={{ step: 300, // 5 min }} /> </form>

API