Accept value as string - Githubissues

MwirabuaTimothy commented 6 years ago

I keep getting these three errors:

proxyConsole.js:56 Warning: Failed prop type: Invalid prop `value` supplied to `MonthView`.
    in MonthView
...
./node_modules/react-date-picker/node_modules/react/cjs/react.development.js.Component.setState @   react.development.js:237
DatePicker._this.closeCalendar  @   DatePicker.js:70
DatePicker._this.onClick    @   DatePicker.js:65

proxyConsole.js:56 Warning: Failed prop type: Invalid prop `value` supplied to `Days`.
    in Days
...
./node_modules/react-date-picker/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:237
DatePicker._this.closeCalendar @ DatePicker.js:70
DatePicker._this.onClick @ DatePicker.js:65

dates.js:34 Uncaught TypeError: date.getMonth is not a function
  at getMonthIndex (dates.js:34)
    at getBeginOfDay (dates.js:258)
    at getDayRange (dates.js:276)
    at getRange (dates.js:452)
    at getTileClasses (utils.js:93)
    at Days.render (Days.js:72)
    ...

BernaUUUdo commented 6 years ago

I have the same problem, i think that it's a bug, but i found a workaround !!! When I access nested object properties I'm getting the same error : (this.props.myObject.initialDate)

                                <DatePicker
                                    value={this.props.myObject.initialDate }
                                    onChange={this.props.atualizarAtividadeDataControle}
                                />

but if I change the value to simple variable, the component works fine! changing this.props.myObject.initialDate for this.props.myObjectinitialDate

                                <DatePicker
                                    value={this.props.myObjectinitialDate }
                                    onChange={this.props.atualizarAtividadeDataControle}
                                />

about my system, I use: "react": "^16.1.1", "react-dom": "^16.1.1", "react-redux": "^5.0.6", "redux": "^3.6.0", "react-date-picker": "^6.6.2",

MwirabuaTimothy commented 6 years ago

The workaround by @BernaUUUdo wont work for me since I am using a global object to store my date. To avoid the errors, I had to parse my string dates to Date. I thought 6.7.0 does that automatically based on this update - https://github.com/wojtekmaj/react-date-picker/issues/26

Changing the date doesn't actually work for me.

My app uses:

"devDependencies": {
    "custom-react-scripts": "^0.1.4",
    "gulp": "^3.9.1"
  },
  "dependencies": {
    "@tinymce/tinymce-react": "^2.0.3",
    "axios": "^0.16.2",
    "chart.js": "2.5.0",
    "history": "^4.7.2",
    "mobx": "^3.2.2",
    "mobx-react": "^4.2.2",
    "rc-slider": "^8.3.1",
    "react": "15.6.1",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-avatar-editor": "^10.2.1",
    "react-breadcrumbs": "1.6.6",
    "react-chartjs-2": "2.0.5",
    "react-date-picker": "6.7.0",
    "react-dom": "15.6.1",
    "react-instagram-embed": "^1.3.2",
    "react-ladda": "5.0.6",
    "react-quill": "^1.1.0",
    "react-router": "3.0.3",
    "react-router-dom": "4.2.2",
    "react-select": "1.0.0-rc.5",
    "react-text-mask": "^4.1.0",
    "react-toastr": "^2.8.2",
    "react-tooltip": "^3.3.0",
    "react-transition-group": "^1.2.0",
    "react-tweet-embed": "^1.0.8",
    "react-youtube": "^7.4.0",
    "reactable": "^0.14.1",
    "reactstrap": "4.5.0",
    "socket.io-client": "^2.0.4"
  },

wojtekmaj commented 6 years ago

Hello, would you please create a minimal reproduction sample? It'd really help me out wit debugging.

dfalling commented 6 years ago

Hiya, I have the same issue. It happens whenever I click outside of the DatePicker while the value is a string.

Here's a working (failing) app:

import React from 'react';
import DatePicker from 'react-date-picker';

export default () => <DatePicker value={"2018-03-28T04:00:00.000Z"} />;

wojtekmaj commented 6 years ago

@dfalling, thanks for this. react-date-picker does not support value as a string, as in documentation. You need to wrap the date in new Date().

Gtosta96 commented 6 years ago

@wojtekmaj It would be very nice to have. Would you mind if I fork the project and pull request this enhancement?

wojtekmaj commented 6 years ago

Sure thing, you may have a go :)

SreekanthReddyKambam commented 5 years ago

I have faced the same issue saying date.getMonth is not a function in the console when I click the calendar icon to change the date

        <DatePicker value={this.state.RevisionDate} required={true} onChange=this.handleRevisionDateChanged} />

          private handleRevisionDateChanged(value: Date): void {
                 return this.setState({
                RevisionDate: value
            });
        }

the state variable Revisiondate is a property of Date type, any help?

wojtekmaj commented 5 years ago

@SreekanthReddyKambam And your RevisionDate has a value of...? If it's indeed a date, then there shouldn't be such a problem. Perhaps you could share the whole error stack?

wojtekmaj commented 4 years ago

Closed as it's working just fine with the latest React-Date-Picker version.

wojtekmaj / react-date-picker

Accept value as string #46