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.

See Figma file →

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.