React date picker returns invalid date

Question

In google chrome everything works ok. When I open the application in mozilla React Date Picker returns invalid date

I tried to use the moment(this.state.startDate).toDate()

new Date(this.state.startDate) but it doesn't work

class Example extends React.Component {
  state = {
    startDate: new Date()
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  render() {

    return (
      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
      />
    );
  }
}

what is the version of react-datepicker do you use? and what is the version of Mozilla? — Denys Kozak, Sep 03 '19 at 07:58
What is `date`? If it is an event, use `startDate: event.target.value` — Bear, Sep 03 '19 at 07:58
@DenysKozak "react-datepicker": "^2.6.0", firefox quantum 68.0.2(64 bity) mozilla firefox dla ubuntu — Umbro, Sep 03 '19 at 08:06
@Umbro Can you try `onChange={this.handleChange.bind(this)}` instead of `onChange={this.handleChange}`, also what is your react version? — Minato, Sep 03 '19 at 08:13

score 1 · Answer 1 · answered Sep 03 '19 at 07:55

1

Try adding dateFormat property like:

      <DatePicker
        selected={this.state.startDate}
        onChange={this.handleChange}
        dateFormat="d MMM yyyy"
      />

answered Sep 03 '19 at 07:55

Tarreq

1,282
9
17

score -1 · Answer 2 · answered Sep 03 '19 at 08:04

You can try this approach this code is working perfectly in my project in Mozilla, chrome, and edge. My date picker version is "react-datepicker": "^2.7.0", and react version is "react": "^16.8.6",

filters:{
                    startDate: new Date(),
                    endDate: new Date(),
                    type: props.location.state === undefined ? 0 : props.location.state.reportType,
                    reportName : 'Not Selected',
                    reportPreviewCount: 0,
                    reportedUserId: -1,
                    userType: '0',
                },    


    handleChangeDate(date, dateType) {
            let oldState = this.state.filters;

            if(dateType === 'startDate'){
                oldState['startDate'] = date;
                oldState['reportPreviewCount'] = 0;

            }else{
                oldState['endDate'] = date;
                oldState['reportPreviewCount'] = 0;
            }
            this.setState({titleDatatable: [], dataSetDataable: [], filters: oldState, flashState: true});
        }     


                          <DatePicker
                                selected= {props.filters.startDate}
                                onChange={(date) => props.handleChangeDate(date, 'startDate')}
                                className="form-control"
                                peekNextMonth
                                showMonthDropdown
                                showYearDropdown
                                dropdownMode="select"
                                onChangeRaw={(e) => e.preventDefault()}
                                withPortal
                            />

try initiating with the moment. liek startDate: moment(),endDate: moment().what are your versions for react and datetime-picker — ANIK ISLAM SHOJIB, Sep 03 '19 at 12:19
in "react": "^16.6.3" and "react-datepicker": "1.6.0", i used moment — ANIK ISLAM SHOJIB, Sep 03 '19 at 12:20

React date picker returns invalid date

2 Answers2