Search code examples
reactjsmultiple-instancesdaterangepicker

ReactJS Daterangepicker - Multiple instance in same component

How to add multiple instance of date range picker in same component. 

<DateRangePicker
  startDate={this.state.startDate}
  startDateId="start_date1"
  endDate={this.state.endDate}
  endDateId="end_date1"
  onDatesChange={({ startDate, endDate }) => {
    this.setState({ startDate, endDate });
  }}
  focusedInput={this.state.focusedInput}
  onFocusChange={focusedInput => this.setState({ focusedInput })}
  displayFormat="DD/MM/YYYY"
  isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
/>

Solution

  • Got it working with this package, https://www.npmjs.com/package/react-date-range-next