React-dates: Can select a range with blocked dates using the DateRangePicker

[majapw]

This should maybe be an option instead of the default. We're going to eventually need to prevent people from selecting date ranges that include blocked dates.

[agupta93]

@majapw can you please specify the exact behaviour that is expected, as in when the user tries to click on end date with block dates included in duration should the user click be disabled or is he allowed to click but the date range is not selected with an error saying blocked dates in range ?

[majapw]

I think no error message for now (we're working on a possible design for that sort of scenario). Most importantly, if there is a hover span, that should disappear once the span itself contains a blocked date (similar to what happens when you hover over a blocked date itself).

As for the click, the click should register up through to the DateRangePicker component, but should be prevented from doing anything further in that component's handleDayClick method I think.

My biggest problem with this when I tried to implement this previously was performance. Namely I got a solution that worked rather well for short ranges, but slowed the entire component down hella when the range was a handful of months.

[agupta93]

@majapw okay i kinda understood it will start working on this one now :) will ask if i encounter further doubts

[agupta93]

@majapw i have tried implementing this feature and as you said there were performance issues as the range increased to months and years. This majorly stems from the fact that you have to iterate though days again and again. I have tried implementing in a way to avoid such iteration and have reached to the following behaviour screenshot is attached

As it can be seen in the image that if blocked dates are not allowed the span only extends before the first blocked date and disappears on any date after the blocked that indicating that the user can only select the range without blocked dates. Tell me if this behaviour is ok so that i can proceed with it further

[gigitux]

Any update?

[oldo]

Looks great @agupta93
This is exactly the behaviour that we are looking for. Do you have the work you've done so far on a branch/fork that I might be able to checkout?

[agupta93]

@oldo yes i might have the branch but as u can see it was done months ago, since i received no confirmation i stopped working on it. Its still a work in progress tell me when you need it and will try to complete and give you the branch :)

[oldo]

Ready when you are @agupta93 :-)
I'm about to start working on implementing this feature now so even if you are not 100% happy with what you've done please feel free to share it as it would be a great headstart.
Thanks!

[agupta93]

@oldo okay will give u the branch this weekend busy in some lately i hope u can wait :)

[oldo]

@agupta93 thank you! I look forward to having a look :-)

[agupta93]

@oldo https://github.com/agupta93/react-dates/tree/blocked-dates
here is the branch my changes are in the commit tempCommit have a look

[vongkim]

Are there any updates to this?

[oldo]

@agupta93 apologies for the delayed response. Thanks very much for sharing your work. In the end I resolved the problem by creating a function that checks for blocked dates between a start and end date:

export function checkForBlockedDates(start, end, dates) {
  const dateFormat = 'YYYY-MM-DD';
  const diff = moment(end).diff(start, 'days') + 1;

  for (let i = 0; i < diff; i++) {
    const checkDate = moment(start).add(i, 'd').format(dateFormat);

    if (dates[checkDate] && dates[checkDate].blocked) {
      return true;
    }
  }

  return false;
}

And if this function returns true then I just clear selection and display a modal saying that there are blocked dates within the selected range.

[ingoclaro]

my $0.02: After the user selects the first date, disable all dates after the first blocked date following the selected date. A different background color could be used to differentiate these dates from the blocked dates.

[timhwang21]

@ingoclaro agreed, that's how we're doing it on our end. But there are some undesirable edge cases, because if there is no initial value, the initial check for blocked dates after start date is selected happens before startDate is passed to the change handler.

@majapw is there still desire for a PR on this? Thanks!

[laurenz-glueck]

@agupta93 would be really helpful if this feature would be included as an option into the master branch - any plans for that?

[colemerrick]

My $.02 - think there should be a clear difference between blocked functionally and blocked visually. Perhaps 2 props - isDayBlocked vs isDayDisabled? With isDayDisabled not preventing a range selection with a disabled day in the middle.

Use case: bookings at businesses/schools where one needs to disable weekends/holidays but still need to select date-ranges over them.

[janeschindler]

This is also a featured I'd love to see.

[heleneshaikh]

I think that this is a very important and basic feature to implement.

[skevlishvili]

This would be a great feature to have

[giverz]

As a workaround I'm comparing the startDate to the next earliest blocked date, and passing these dates to isOutsideRange.

Would love to have this as a feature!

[lianju]

Any updates here? 3 years went by since pull request.

[lianju]

@majapw How do you handle this at airbnb? Seems that it’s not possible to select a range with blocked dates.

[IadityaM]

Any updates on this? Could really use this functionality.

[omeiirr]

Hi, any updates?
Is this a part of the main branch yet?
It still allows the user to select a range containing some blocked date.

@oldo Thanks for the function you described above. How can I use that? Where should it be called? A simple example would be of immense help. Thanks. 😁