Material-ui-pickers: TypeError: Cannot read property 'date' of undefined

[andrew-w-ross]

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | 1.0.0-rc.1 |
| material-ui | 1.0.0-beta.35 |
| React | 16.2.0 |
| Browser | all |
| Platform | node |

Steps to reproduce

1. Clone andrew-w-ross/material-ui-pickers-bug
2. Install and run start

Expected behavior

The page to render

Actual behavior

TypeError: Cannot read property 'date' of undefined

[andrew-w-ross]

I didn't see the udpated readme.

[good2hear]

@andrew-w-ross I'm getting the same error..
how did you solve it?

tried to use
<MuiPickersUtilsProvider utils={DateFnsUtils}>
to wrap DatePicker component as well but didn't work either

[andrew-w-ross]

@good2hear I didn’t have time to test it out so I stayed on beta. With that being said did you install date-fns@next?

[good2hear]

@andrew-w-ross yeap i installed date-fns@next and was still getting the same error.

[good2hear]

@andrew-w-ross guess it's fixed with the current one! (1.0.0-rc.2)

[andrew-w-ross]

@good2hear Yeah just checked it out now and it seems to be working

[pavanshinde47]

I am still facing the issue. https://codesandbox.io/s/k9y8kz1r1v

[cherniavskii]

@pavanshinde47 follow installation guide https://material-ui-pickers.firebaseapp.com/installation

[pavanshinde47]

@cherniavskii, I am doing the same. I have installed the library and my project already using moment. Can you just correct my codesandbox or paste the working code here?

[SharathSreekumar]

@cherniavskii, I am doing the same. I have installed the library and my project already using moment. Can you just correct my codesandbox or paste the working code here?

Hey @pavanshinde47.
_In package.json_:
{ "name": "new", "version": "1.0.0", "description": "", "keywords": [], "main": "src/index.js", "dependencies": { "@material-ui/core": "1.1.0", "@material-ui/icons": "1.1.0", "material-ui-pickers": "1.0.0-rc.9", "react": "16.3.2", "react-dom": "16.3.2", "react-scripts": "1.1.4", "moment": "^2.22.2" }, "devDependencies": {}, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

Add the following in _index.js_:

/* Header imports */
import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";
import MomentUtils from "material-ui-pickers/utils/moment-utils";
....

const App = () => (
  <MuiPickersUtilsProvider utils={MomentUtils}>
    <div style={styles}>
      <Hello name="CodeSandbox" />
      <h2>Start editing to see some magic happen {"\u2728"}</h2>
    </div>
  </MuiPickersUtilsProvider>
);

_In Hello.js_:

import {
  Event,
  KeyboardArrowLeft,
  KeyboardArrowRight
} from "@material-ui/icons";
import { DatePicker } from "material-ui-pickers";

export default class Hello extends PureComponent {
  ....
  render() {
    const { selectedDate } = this.state;

    return (
      <Fragment>
        <div className="picker">
          <DatePicker
            label="Basic example"
            value={selectedDate}
            onChange={this.handleDateChange}
            animateYearScrolling={false}
            // For Calender button Icons
            keyboardIcon={<Event />}
            leftArrowIcon={<KeyboardArrowLeft />}
            rightArrowIcon={<KeyboardArrowRight />}
          />
        </div>
        .......
      </Fragment>
    );
  }
}

This should get the calendar up. It worked on your https://codesandbox.io/s/ko1qw9qknr after updating with this code.

[TrySound]

Guys, use import { MuiPickersUtilsProvider } from 'material-ui-pickers' please. It should solve the problem.