feat: added "excludeDisabledDays" prop for range picker #2001
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
I'm planning to use react-day-picker for a booking website and typically I would use the range picker. Days that are already booked would appear as disabled but the current package let the user pick a range with potentially disabled days inside.
In that particular use-case, it doesn't work as a booking can't overlap another one.
Analysis
Current code only disables dates for clicking on it, so when a user selects a range, the
from
can be before a disabled date and theto
after, hence selecting a disabled date. In a case of a booking website, that would mean someone could double book.Solution
My solution is to pass a boolean
excludeDisabledDays
as prop and if true, the modifiers.disabled will be updated with the enclosing disabled dates. Hence if the user selects a date before a disabled date, then all the dates after that disabled date will be also disabled. The functionfindDisabledDays
looks for the closest disabled dates after and before the selected date and that result is used to update the disabled dates accordingly.The function
addToRange
had to be updated as with amin
provided, the user could have ended up in the situation where no other dates could be selected. Clicking again on the selected date will now clear the range.