Component: Date range picker
Problem
UPDATE as of 2023.07.11:
I am revisiting this issue after working on: VSA: [UX] Usability improvements - adding prede... (gitlab-org/gitlab#408656 - closed)
Currently there are different patterns and variation on how we filter time/date in GitLab. For example:
- Leveraging multiple date picker in order to select a range (gitlab-org/gitlab!120160 (comment 1385848846))
- It can also be done within the filter bar (gitlab-org/gitlab!120160 (comment 1385649821))
Ideally, there would be a single pattern that to filter time/date and date ranges.
See prior problem statement
Let's create a date range picker component...
When I am exploring a large data set, I want to filter the data between a start and end date (and potentially times), so that I can focus on a narrower subset of data.
Component interactions/requirements
- Date range selector - input accessible through keyboard, screen reader and UI
- Month & year selectors - Currently available via dropdown
- Date range constraints - Configured by developer, this would require an indicator and setting disabled states on dates outside the range.
- Date range presets - Optional. Configured by the developer. Potentially let users configure in some use cases?
- Mobile optimized - When on mobile, snap to occupy full screen. Allow embedded scrolling through months.
- Responsively change month panel size - When page is large enough, show two months side-by-side. Or allow embedded scrolling through months.
- Time-picker - Optional. Allow fine-grained selection on times. Integrated with date-picker UI.
Proposed roadmap
TBC
Exploration
See archived explorations
1. Input
Multiple inputs vs divider vs dash vs arrow?
2. Additional date states
Range 100 vs range 300?
3. Line height
0px vs 1px vs 2px vs 4px?
4. Range constraints & indicator
Top or bottom?
5. Range presets
Left or right? Grey background?
Design source
Resources
Edited by Libor Vanc