Где указатель даты в материале пользовательского интерфейса дальше?

Я пытаюсь использовать next ветвь материала пользовательского интерфейса https://github.com/callemall/material-ui/tree/next. Потому что я хочу использовать layout составная часть. Но я не могу найти DatePicker составная часть! Как использовать DatePicker в next ветка?

import {DatePicker} from 'material-ui'

WARNING in ./app/Resources/js/components/FormConstructor/Field.js 208:47-57 "export 'DatePicker' was not found in 'material-ui'

Источник

6 ответов

Решение

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

Источник

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

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

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

У него есть средство выбора даты, которое фактически основано на компоненте TextField с типом, установленным в "date". Копирование как есть -

  <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 и средство выбора даты. Довольно настраиваемый и поставляется с материальным стилем, который хорошо вписывается в общий вид.

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

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

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

Выбор даты

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

Источник

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

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

Источник

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

Например:

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

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

Например:

import DatePicker from 'material-ui/DatePicker';
Источник

Использовать этот
import DatePicker from 'material-ui/DatePicker';

также перейдите по этой ссылке для получения полной информации о материале-UI Date-Picker. Не забудьте установить material-ui, т.е. установить npm --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;
Источник
Другие вопросы по тегам