search

t0gre / react-datepicker

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.
https://react-datepicker.netlify.com/
MIT License
331 stars 54 forks source link

[DateRangeInput] Multiple active range dates #136

Open Nargonath opened 3 years ago

Nargonath commented 3 years ago

Thank you for the great library.

I know we can define a minBookingDate and maxBookingDate but is it possible to define multiple ranges? For example one for the current year and one for the next year. Looking at the documentation I'm not sure we can but perhaps there is a way to do it that I'm not aware of.

Nargonath commented 3 years ago

FWIW I managed to do it with the existing API using minBookingDate, maxBookingDate and isDateBlocked. The first two fields were set respectively to the lower and higher date within all the ranges. In the latter I just compared the date given to the ranges to determine whether it was contained within or not. Worked like a charm.

I leave it open in case you want to provide some kind of first class citizen feature otherwise feel free to close the issue. Thanks 🙏 .

t0gre commented 3 years ago

Hi @Nargonath sorry it took me a while to respond. I took over maintaining the project recently but hadn't realized GitHub wasn't notifying me of new issues.

Glad to hear you got it working. If I understand correctly, it sounds like your solution would work well when the difference between date ranges for different years is quite small, but might be hard for e.g. when there's no overlap between the date ranges for different years? If so, I will mark it as a feature request and leave it open.

Nargonath commented 3 years ago

hello @tomgreenwood1 . Thanks for stepping up and maintaining this package. Don't worry I know how it is working on open-source projects. 😄

i'm actually retrieving the active date ranges from a backend where that I don't manage myself. We definitely can have multiple months or even a year difference between ranges. I didn't notice any performance implication so far though. We have a wrapper around the datepicker range component and our component receive the ranges list and we use isDateBlocked to check whether a specific date is within the range list passed as prop. Not sure what you mean by hard though. The code doesn't change based on range size or period between them. Feel free to tell me if you need more information, I'm not sure I answered your question properly.