javascript - Where is the datepicker in material ui next? - Stack Overflow

admin管理员组

文章数量:1400182

I am try use next branch of material ui . Because i want use layout ponent. But i can not find DatePicker ponent! How use DatePicker in next branch?

import {DatePicker} from 'material-ui'

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

I am try use next branch of material ui https://github./callemall/material-ui/tree/next. Because i want use layout ponent. But i can not find DatePicker ponent! How use DatePicker in next branch?

import {DatePicker} from 'material-ui'

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

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited May 7, 2020 at 14:37 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked May 2, 2017 at 10:29 Максим БарулинМаксим Барулин 31711 gold badge44 silver badges1717 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Firstly, I am in the same boat. And I dearly miss the DatePicker from the stable release of material-ui (dated 10/04/2018). I too upgraded to the @next, at the moment at v1.0.0-beta.41 and reached the state of shock to not have found the elegant DatePicker.

This is what I have noticed and now changing to -

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

It has a date picker, which is actually based out of the TextField ponent having the type set to "date". Copying as is -

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

A small suggestion would be to check if the path exists under the local node_modules. You can also quickly check the ponent catalogue (at https://material-ui-next./) for the version you are using.

Hope this helps.

At the moment to write this answer (2017-06-12) it's still not supported. See https://material-ui-1dab0.firebaseapp./getting-started/supported-ponents

As an alternative to the native controls you can use the Mobiscroll Calendar and Date picker. Pretty customizable and es with material styling that fits well with the general look & feel.

Calendar ponent

Date picker ponent

---

Full disclosure: this is a mercial ponent, and I am one of the makers, just though it could help someone looking for a solution.

Import as DatePickers, TimePickers, DateAndTimePickers in latest material-ui version V1.0.0-beta.26.

Eg:

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

Importing Datepicker as like below is no more valid in latest version.

Eg:

import DatePicker from 'material-ui/DatePicker';

You can check out here where I did an example of creating a datepicker using material-ui (next branch)

You can either import the ponent or just check out the source code to learn how to create a datepicker on your own

use this
import DatePicker from 'material-ui/DatePicker';

also visit this link for pleted details about material-ui date-picker. Don't forget to install material-ui i.e npm install --save material-ui

sample code below

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

export default DatePickerExampleSimple;

本文标签： javascriptWhere is the datepicker in material ui nextStack Overflow