React-dates: How to limit a select dates in date range picker.

[Subramanian8]

I want limit a select dates in date range picker.
(Maximum Nights)

for example,
Allow to choose 90 days (3 months) only in date range picker.

First i choose start date as 1/1/2017(january 1st, 2017),
then the end date to choose is only with in 90 days.
Other dates are must in disable state.

[erin-doyle]

I think you should be able to use isOutsideRange which is a function that takes a day and is called on each day. You can return true or false as to whether that day is outside of the range you want to allow. So you can check to see if the day is within that 90 days from the selected start date.

[Subramanian8]

@erin-doyle can you please share the exact condition if you know?

[majapw]

You could have your isOutsideRange method look something like:

isOutsideRange={(day) => {
  if (focusedInput === END_DATE) {
    return isAfterDay(day, this.state.startDate.clone().add(90, 'days')) || isBeforeDay(day, this.state.startDate);
  } 
  return false; // or whatever the default outside range is here
}

[dcmwong]

Literally did what you wanted today:

isOutsideRange(day) {
        return (
            !isInclusivelyAfterDay(day, this.state.startDate) ||
            isInclusivelyAfterDay(day, moment(this.state.startDate).add(90, 'days'))
        );
    }

However I didn't end up using it as it prevents the user from correcting their selection ie. if they want the next selection's start date to be past 90 days of the original start date. You may not encounter this.

[tonytrinh206]

isOutsideRange={(day) => {
      if(this.state.focusedInput == "endDate"){

                  // End date is not after today and not before start date
          return day.isAfter(moment(new Date())) || day.isBefore(this.state.startDate);
      }
      if(this.state.focusedInput == "startDate"){

         // Start date is not after today and not after end date and not before 2 years ago. 
                 return day.isAfter(moment(new Date())) || day.isAfter(this.state.endDate) || day.isBefore(moment(new Date()).add(-2, 'years'));
      }

      return false;
}} 

[wufeicris]

use prop isOutsideRange , when return true means day cannot be selected