Date Range Component

[paryhin]

We need a component for an easy date range selection, mostly applicable for Metrics and similar patterns. As a quick win, before implementing a fully featured date picker, we can go with a simplified version.

As for the final version, we are exploring two possible directions. The first one offers a more common user experience:

Prototype video:

date_range_ox.mp4

And the second one benefits from ease of selection for the quick options:

And finally, for the second option, we can possibly use separated controls if the combined one introduces too much complexity:

@david-crespo @zephraph Please let me know what you think guys, thanks.

Figma link

[paryhin]

cc @benjaminleonard

[david-crespo]

Very cool. Ranges for metrics are going to need to include the time. Of course you already have that for the quick picker.

Two things I've found useful in log explorer UIs:

• Specifying a range by N hours ending/starting at time T. Often that's easier than coming up with two datetimes
• Buttons that let you slide the whole range forward and back by a certain amount

[david-crespo]

I like the look of React Aria's useDatePicker and their Tailwind example. Their full React Spectrum date picker component is a no-go for us because you can't really style it the way we'd want.

Tremor's date picker (source, demo) takes a very different approach, simply inlining a bunch of React state. We couldn't use it directly because it doesn't seem to handle times, but it's a great model if we wanted to go the from-scratch route. I think we should try React Aria first.

[paryhin]

If possible, it would be nice to have this small badge that shows you the number of days that you've selected.