Pickers

Pickers provide a simple way to select a single value from a pre-determined set.

React controls default to native controls and support. When using date and time pickers, include appropriate helper text and validation, and check browser support.

• 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 drop-down buttons.

Date Pickers

A native date picker example with type="date", it can be used as a calendar too.

<form noValidate>
  <TextField
    variant="outlined"
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2019-01-31"
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Date & Time Pickers

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

<form noValidate>
  <TextField
  variant="outlined"
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2010-01-31T10:30"
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Time Pickers

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

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