Add a maximum number of days with react-dates

Question

I'm wondering if it's possible to add a maximum number of days to pick using react-dates. Basically the inverse of minimumNights property that already exists.

Cheers

Answer 1

You can use the isOutsideRange predicate prop.
You pass in a function that will set each date as available or not respectively to your maximum number of days variable.

Example:

const maximumDays = 6;
isOutsideRange = day => (
        focusedInput === END_DATE && (day.isBefore(startDate) || day.isAfter(startDate.clone().add(maximumDays, 'days')))
      );  

And then pass it to the component:

<DateRangePicker
  isOutsideRange={isOutsideRange}
  onDatesChange={this.onDatesChange}
  onFocusChange={this.onFocusChange}
  focusedInput={focusedInput}
  startDate={startDate}
  endDate={endDate}
/>