0

I want to limit the range length in react-day-picker to e.g. 10 days. How should this be done, is something availlable in the package already?

This is an example range selector: https://react-day-picker.js.org/examples/selected-range/

Hoetmaaiers
  • 3,413
  • 2
  • 19
  • 29

1 Answers1

1

Could be easily implemented, I've just added some lines to the handleDayClick function:

Instead of this:

  handleDayClick(day) {
    const range = DateUtils.addDayToRange(day, this.state);
    this.setState(range);
  }

Implement this:

  handleDayClick(day) {
    const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
    const diffDays = Math.round(Math.abs((day - this.state.from) / oneDay));
    const range = DateUtils.addDayToRange(day, undefined);

      if(diffDays <= 10){
        const range = DateUtils.addDayToRange(day, this.state);
        this.setState(range);
      }
      else {
        this.setState(range);
      }
  }
yuri
  • 3,182
  • 2
  • 16
  • 26