Где находится средство выбора даты в пользовательском интерфейсе материала?

На данный момент, чтобы написать этот ответ (2017-06-12), он все еще не поддерживается. См. https://material-ui-1dab0.firebaseapp.com/getting-started/supported-components

Во-первых, я в одной лодке. И мне очень не хватает DatePicker из стабильной версии material-ui (от 04.10.2018). Я тоже обновился до @next, на данный момент v1.0.0-beta.41 и был в шоке от того, что не нашел элегантного DatePicker.

Это то, что я заметил и теперь меняю на -

https://material-ui-next.com/demos/pickers/

У него есть средство выбора даты, которое на самом деле основано на компоненте TextField с типом, установленным на «дата». Копирую как есть -

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

Небольшим предложением было бы проверить, существует ли путь в локальном node_modules. Вы также можете быстро просмотреть каталог компонентов (по адресу https://material-ui-next.com/) для версии, которую вы используете.

В качестве альтернативы встроенным элементам управления вы можете использовать Календарь Mobiscroll и Выбор даты. Довольно настраиваемый и поставляется со стилем материала, который хорошо сочетается с общим внешним видом.

Компонент календаря

Компонент выбора даты

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

Импортируйте как DatePickers, TimePickers, DateAndTimePickers в последней версии material-ui версии V1.0.0-beta.26.

Eg:

import {DatePickers, TimePickers, DateAndTimePickers} from 'material-ui';

Импорт Datepicker, как показано ниже, больше не действует в последней версии.

Eg:

import DatePicker from 'material-ui/DatePicker';

Вы можете проверить здесь, где я сделал пример создания средства выбора даты с использованием материала -уи (следующая ветка)

Вы можете либо импортировать компонент, либо просто проверить исходный код, чтобы узнать, как создать средство выбора даты самостоятельно.

используйте это
import DatePicker from 'material-ui/DatePicker';

также посетите эту ссылку, чтобы получить подробные сведения о средстве выбора даты material-ui. . Не забудьте установить material-ui, т.е. npm install --save material-ui

пример кода ниже

const DatePickerExampleSimple = () => (
  <div>
    <DatePicker hintText="Portrait Dialog" />
    <DatePicker hintText="Landscape Dialog" mode="landscape" />
    <DatePicker hintText="Dialog Disabled" disabled={true} />
  </div>
);

export default DatePickerExampleSimple;