Поля выбора даты/времени

Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.

На мобильном устройстве лучше всего отображать в модальном окне.
Для инлайн-отображения, например в формах стоит рассмотреть возможность использования более компактных элементов управления, таких как сегментированные выпадающие кнопки.

@material-ui/pickers

npm downloads

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

Date picker inline

Date picker dialog

Time picker

Native pickers

⚠️ Поддержка нативных типов полей ввода не идеальна. Взгяните на @material-ui/pickers для более детального решения.

Выбор даты

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>

Поля выбора даты & времени

Нативное поля выбора даты и времени с помощью 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>

Поля выбора времени

Нативное поле выбора времени с помощью 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

<TextField />