I'm using Datepicker ponent for calendar to update my state with date picked by user.

When I trying to change default date using input React outputs error: "TypeError: e.target is undefined".

Thank you.

State:

this.handleSubmit = this.handleSubmit.bind(this);
this.handleDate = this.handleDate.bind(this);
this.handleGuests = this.handleGuests.bind(this);
this.handleName = this.handleName.bind(this);
this.state = {
  min: new Date().getHours,
  max: new Date(),
  booking: {
    date: new Date(),
    people: 1,
    name: 'John Doe',
  },
}

handleDate function:

handleDate(e){
const booking = {...this.state.booking}
booking.date = e.target.value;
this.setState({booking});
}

Datepicker:

<DatePicker
            name="Datepicker"
            className="form-control mx-auto form-control-lg p-3"
            selected={this.state.booking.date}
            onChange={this.handleDate}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={60}               
            dateFormat="MMMM dd, yyyy h:mm aa"
            timeCaption="Time"
            placeholderText="Click and choose the date"
          />

I'm using Datepicker ponent for calendar to update my state with date picked by user.

When I trying to change default date using input React outputs error: "TypeError: e.target is undefined".

Thank you.

State:

this.handleSubmit = this.handleSubmit.bind(this);
this.handleDate = this.handleDate.bind(this);
this.handleGuests = this.handleGuests.bind(this);
this.handleName = this.handleName.bind(this);
this.state = {
  min: new Date().getHours,
  max: new Date(),
  booking: {
    date: new Date(),
    people: 1,
    name: 'John Doe',
  },
}

handleDate function:

handleDate(e){
const booking = {...this.state.booking}
booking.date = e.target.value;
this.setState({booking});
}

Datepicker:

<DatePicker
            name="Datepicker"
            className="form-control mx-auto form-control-lg p-3"
            selected={this.state.booking.date}
            onChange={this.handleDate}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={60}               
            dateFormat="MMMM dd, yyyy h:mm aa"
            timeCaption="Time"
            placeholderText="Click and choose the date"
          />

• javascript
• reactjs

Share Improve this question Follow asked Jan 6, 2019 at 2:15 VerthonVerthon 3,26744 gold badges2222 silver badges3535 bronze badges 3

• Try this: handleDate(dateValue) { console.log(dateValue) } – EugenSunic Commented Jan 6, 2019 at 2:24
• Changed from e.target.value to e and working great, thanks! – Verthon Commented Jan 6, 2019 at 2:28
• @Verthon, I tried this and it worked for me, however, I don't understand why. Could you explain why? – CGermain Commented Mar 17, 2020 at 3:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

From the readme file date-picker ponent:

https://github./Hacker0x01/reactdatepicker/blob/master/README.md#installation

The callback doesn't use an event, it already contains the date object in the argument of the handleChange function.

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

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

You can wrap value like this:

onChange={(date) => handleChange({target: { name: "registrationDate", value: date }})}