I am having problem updating the date on react-datepicker if I use multiple instances of datepicker.

Date picker Component:

<DatePicker
  selected={this.state.from}
  onChange={this.changeDate.bind(this)}
/>

On change handler:

changeDate(date) {
    this.setState({
        from : date
    });
}

This seems to work fine if i am using only one instance, but when I add more than one instances, I have to create separate onchange handler for each of the newly created date picker ponent. What I am looking for is a way to write just a single onchange handler function and handle change events for multiple instances of datepicker in that same function.

I am having problem updating the date on react-datepicker if I use multiple instances of datepicker.

Date picker Component:

<DatePicker
  selected={this.state.from}
  onChange={this.changeDate.bind(this)}
/>

On change handler:

changeDate(date) {
    this.setState({
        from : date
    });
}

This seems to work fine if i am using only one instance, but when I add more than one instances, I have to create separate onchange handler for each of the newly created date picker ponent. What I am looking for is a way to write just a single onchange handler function and handle change events for multiple instances of datepicker in that same function.

• javascript
• reactjs
• datepicker
• react-datepicker

Share Improve this question Follow asked Jun 15, 2018 at 0:00 Hasn AHasn A 8311 gold badge11 silver badge77 bronze badges 3

• It sounds like you have one view containing multiple DatePickers, and each updates its own separate state property, right? If so, you can rewrite changeDate to accept an argument indicating the state property name, and return a function that calls setState on that property only. – uncleoptimus Commented Jun 15, 2018 at 1:03
• Yeah that is correct, and i tried doing that but i am not able to update the state inside the handlechange function, if i update the state with string literal like "startDate": dateValue, then it works but if i use the function parameter like dateName: dateValue then it doesnt work, even though dateName=startDate – Hasn A Commented Jun 16, 2018 at 0:15
• Are you using react-datepicker? I'm having the same issue you have. How did you manage to solve it? – Pim Commented Jun 7, 2019 at 2:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can have onChange Handler like that with two argument dateName and dateValue

//in state
 this.state = {
  startDate: moment(),
  endDate: moment(),
}

//My onChange handler function    
handleDateChange(dateName, dateValue) {
    let { startDate, endDate } = this.state;
    if (dateName === 'startDateTime') {
      startDate = dateValue;
    } else {
      endDate = dateValue;
    }
    this.setState({
      startDate,
      endDate,
    });
  }

// Date Picker ponent
<DatePicker
    id="start-date-time"
    name="startDateTime"
    className="form-control"
    selected={this.state.startDate}
    value={this.state.startDate}
    onChange={date => this.handleDateChange('startDateTime', date)}
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    dateFormat="YYYY-MM-DD, h:mm a"
    timeCaption="time"
  />
//other use of Date picker
<DatePicker


 id="end-date-time"
  name="endDateTime"
  className="form-control"
  selected={this.state.endDate}
  value={this.state.endDate}
  onChange={date => this.handleDateChange('endDateTime', date)}
  placeholderText="choose end date of event"
  isClearable={true}
  showTimeSelect
  timeFormat="HH:mm"
  timeIntervals={15}
  dateFormat="YYYY-MM-DD, h:mm a"
  timeCaption="time"
/>

You can have a object field state to store each date value in property

this.state = {
    fields: {}
}

handleDateChange = (dateName, dateValue) => {
    this.setState({
        fields: {
            ...this.fields,
            [dateName]: dateValue
        }
    })
}

// IN RENDER
<ReactDatepicker 
    value={this.fields["dateStart"]}
    onChange={(value) => handleDateChange("dateStart", value)}
/>