DateTime Range Component

[spatil32]

Hi Team, I have a question about DateTimeRange component. I have a Figma design for Video Insights with a requirement to build custom DateTimeRange component. Previously in Console components, we had Advanced DateTimeRangeContainer component with such functionality. Is there a plan to provide such component in PASTE? Or a team should build a custom component per requirement?

[nkrantz]

Hey @spatil32 - good question! We don't have a DateTime Picker in the system, just separate Date and Time Pickers. The current guidance is to display the two components next to each other to achieve the same result as an <input type="datetime-local />. For ranges, that would mean 4 separate components - a start Date Picker and Time Picker, and an end Date Picker and Time Picker. On the docs pages, you can find examples of date range and time range implementations - you would need to combine the two for a DateTime range.

The Advanced DateTimeRangeContainer component you were previously using also has the quick-select options (Last 6 hours, etc.). That's another piece of functionality that was left out of scope for our current pickers, because the HTML pickers (on which our current components are built) don't support it. If it's important to have those range dropdown options, you could use a Combobox with the last option as "Custom" and only display the range pickers upon selection of that option (to initially hide the clunkiness of showing all 4 pickers together). I put together a quick CodeSandbox to demonstrate that behavior.

If that option doesn't suit your use case, feel free to build a custom solution using the Combobox Primitive. Either way, let us know what direction you end up choosing!

[spatil32]

Hello @nkrantz , thank you for providing the detailed answer and sharing the code sandbox. I would build the component in a similar way with the Custom option opening in Popover with Date & Time Pickers as I have in Figma Design.

[nkrantz]

Hi @spatil32 - just wanted to let you know that the Popover changes are in! Keep me updated with any feedback you have 😄

[spatil32]

Hi @nkrantz , that's great! Thank you for getting this done quickly. I'll try it out today. 😃

[bhamtil-twilio]

Hi @spatil32 and @nkrantz, my team will be updating a similar component this quarter, might this be considered a pattern we can add to the library?

[nkrantz]

Hey @bhamtil-twilio - that's a good idea. We chatted as a team and agree that adding this pattern to Figma (as part of the Filter Group Pattern) would be useful. The design team is going to work on that and will update this thread once there's more info on when you can expect to see it!

[kate-porter]

Hey @bhamtil-twilio! Just wanted to let you know we've just published this custom DateTime Popover in the Paste Patterns library within the Filter group pattern. Let us know if you have any questions or feedback!