Allow Multiple mode to accept date ranges

[GustavoOS]

Currently, to pass date ranges, we need to flat them into a Date array. The result is something is shown below.

The idea is to allow multiple date ranges so every range looks in range

[rodgobbi]

Hi @GustavoOS, the issue is that the DayPicker does not have a behavior defined for selecting multiple date ranges to support such selection mode.
I don't have experience with day pickers that support selecting multiple date ranges to use as a reference, do you know any examples to share?

[gpbl]

There are already other developers who have attempted to implement a multi-range DayPicker component:

• Question: multiple ranges #92

It is actually simple to implement Custom Selections, and I don’t have any objections to adding this feature to DayPicker.

However, I would like someone to first address the requirements and specifications - as it appears here are few opinionated choices regarding “how multi-range works”.

[rodgobbi]

To complement @gpbl's comment, @GustavoOS you could try to use Custom Components to render the flattened days with the same styles as the days within a date range, but you'd need to implement custom logic using the flattened days.

[GustavoOS]

Thanks for the help. I wasn't aware this custom component could allow multiple ranges. I am working in a feature where daypicker is more like a calendar than a picker.

[TLadd]

Google Analytics has an example of a date picker that supports multiple date ranges. They allow selecting a date range and a "compare" date range to show another time series on the same graphs.

The logic around how it chooses which date to update seems to mostly just follow a sort of round-robin approach.

[gpbl]

Oh, I remember that layout, @GustavoOS. I believe it allows selecting a second range by focusing on the second set of input fields.

Let me write an example to demonstrate how to implement it without relying on the existing select modes—it should be possible by intercepting the onDayClick events and adding the appropriate modifiers and corresponding CSS classes. It’s probably not as straightforward as I thought, but it could be a good opportunity to identify the challenges in extending DayPicker’s selection behavior- so we might come up with some extra improvements to support that.