New feature: Check disabled dates on the range

[cosmicstays]

Describe the bug I have passed certain values to datepicker as disabled dates and it is showing the same as blocked dates. I Have set min nights to 5. When I click on a date just before the blocked date, and select the range the datepicker is still allowing to select a range with the blocked dates.

To Reproduce Steps to reproduce the behavior:

1. Add blocked dates [2021-03-02, 2021-03-03]
2. Set min nights to 5
3. Select date 2021-03-01 and select 5 nights.
4. The datepicker lets user choose the blocked dates as well

Expected behavior If minimum nights required not available in a row, then disable all future dates Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. macOS]
• Browser [chrome, safari]
• Version [e.g. 22]

[cosmicstays]

Any update on this bug or how it can be handled currently? We are using this for vacation rentals booking datepicker.

[matiasperrone]

This is not a bug exactly, is a control of the blocked days, blocked days can be a number of uses, for instance when you don't want that anyone book on those days, for instance not checkins or checkouts on certain days, but they could be part of a booking.

Probably you should use bookings prop instead.

[cosmicstays]

I tried using it with bookings prop but it still behaves the same way. Ideally when selecting checkin date the datepicker should disable all the dates that are not possible to be considered checkout date based on restrictions like min nights and available dates.

[LucaGiardi20]

Hi @matiasperrone , i also need the same behaviour described by @cosmicstays, there's a way to implement it through props or with some javascript?

I've tried with disabledDates and bookings but it still behaves the same way.

Thanks

[matiasperrone]

This feature (range validation) it is a new feature, because some times there are people that blocks certain days because they don't want to accept checkins or checkouts those days, but not necessarily are really "invalid".

So you should check on the period-selected event that those dates are in a valid period, and change the endDate prop accordingly.

Anyway, if you want to provide a PR that respects backwards compatibility (you may need an extra prop) and send it, sure, I can publish a new version with it, but make sure to test everything works as before. Right now I am not working in a VueJS project so I didn't have much time to work on this (and others) enhancements.

Just to your knowledge I am planning to work on the Vue 3 version of this component and move all the components (vue 2 and 3) to a new organization, so adding new collaborators is easier, because as you see it is not mine the repo.

So... I'll be waiting for that PR... are you ready to contribute?