reactjsreact-day-picker

Limit react-day-picker range to x days


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/


Solution

  • 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);
          }
      }