Къде е следващият инструмент за избор на дата в потребителския интерфейс на материала?

В момента за писане на този отговор (2017-06-12) той все още не се поддържа. Вижте https://material-ui-1dab0.firebaseapp.com/getting-started/supported-components

Първо, аз съм в същата лодка. И много ми липсва DatePicker от стабилното издание на material-ui (с дата 10/04/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 Calendar и Инструмент за избор на дата. Доста персонализиран и се предлага с материален стил, който пасва добре на общия вид и усещане.

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

Компонент за избор на дата

Пълно разкриване: това е търговски компонент и аз съм един от създателите, въпреки че може да помогне на някой, който търси решение.

Импортирайте като 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';

Можете да разгледате тук, където направих пример за създаване на инструмент за избор на дата с помощта на материал -ui (следващ клон)

Можете или да импортирате компонента, или просто да проверите изходния код, за да научите как да създадете инструмент за избор на дата сами

използвай това
import DatePicker from 'material-ui/DatePicker';

също посетете тази връзка за попълнени подробности относно material-ui date-picker . Не забравяйте да инсталирате 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;