ClickHouse/click-ui

Date/Time Picker Component

Opened this issue · 5 comments

Some upcoming work will require us to take date/times and date/time ranges from users when creating batch / streaming ClickPipes.

We can start with plain text boxes on our end so it's not urgent, but I believe it would enhance the user experience and require less involved input validation in the backend.

This is on the design roadmap

Hi @pjhampton , I have some designs for the date picker.

Simple Date Picker

Users select a single date.

Screenshot 2024-06-27 at 13 37 26

Simple Date Range

Users can select an interval between 2 dates. We can also disable future dates if we want.

Screenshot 2024-06-27 at 13 38 08

Date Range with Predefined Values

To simplify date range selection, we can offer some predefined values, like Past day, Past week Past 2 weeks, Past month, etc, and if those are not enough, we can let users select their own custom period of time.

Screenshot 2024-06-27 at 13 37 50

Date and Time Picker

For ClickPipes, it's useful to pick a specific date and time, this UI aims to address that

Designs can be found here

Deisgns validated with @pjhampton and the design team.

@serdec, can we plan an implementation in the near future?

@crisalbu we don't have the bandwidth at the moment to take on this task

@vineethasok and I chatted about and this and he proposed a list of libraries we can use to power this.

  • Ant design. Pros: Lots of functionality, highly active and used library. Cons: may not be very customizable, comes with a whole design library
  • react-multi-date-picker. Pros: Provides the functionality we need, looks pretty easy to use. Cons: is large (~370 kB package size), unclear how performant this is, seems to be a single person maintaining this project.
  • Adobe react-spectrum datepicker: Pros: Extensible, maintained by Adobe. Cons: will probably require more work than the first two libraries, maintained by Adobe.
  • h6s calendar: Pros: extensible, lightweight. Cons: requires us to implement the UI