React js multiple instances of date picker

Question

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 component. 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.

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, Jun 15 '18 at 01: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, Jun 16 '18 at 00:15
Are you using react-datepicker? I'm having the same issue you have. How did you manage to solve it? — Pim, Jun 07 '19 at 02:44

score 3 · Answer 1 · edited Dec 06 '18 at 07:47

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 component
<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"
/>

score 1 · Accepted Answer · answered Jun 15 '18 at 03:36

1

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)}
/>

answered Jun 15 '18 at 03:36

dungmidside

508
7
19

Everything seems to work except this part `fields: { ...this.fields, [dateName]: dateValue }` i tried this `fields: { [dateName]: dateValue }` and this `fields: { dateName: dateValue }` None of them worked, but this works: `fields: { 'startDate': dateValue }` – Hasn A Jun 16 '18 at 00:08
Can you put your code to codesanbox or somewhere ? Just say with a line of code not helping much – dungmidside Jun 16 '18 at 04:37
You can read more [here](https://reactjs.org/docs/forms.html#handling-multiple-inputs) – dungmidside Jun 16 '18 at 06:54
I got it working, I had some newbie errors in the code, thanks @dungtranhcmus – Hasn A Jun 18 '18 at 20:03

React js multiple instances of date picker

2 Answers2

Linked