<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=554011) </details> <!--IssueSummary end--> # Context https://gitlab.com/groups/gitlab-org/-/epics/17482#note_2565131681 Date selectors that allow users to select a range for their search have become commonplace in modern-day UIs https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1703#note_2548273162. Pajamas has no short-term plans to add this due to lack of immediate need https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1703#note_2540070091. As part of https://gitlab.com/groups/gitlab-org/-/epics/17482#note_2565131681, a date range filter was added to allow users to filter the Commit list by date. In the first iteration of the date range filter, `Committed before` and `Committed after` will appear as separate filters (Option 2 in https://gitlab.com/groups/gitlab-org/-/epics/17482#note_2565131681: <table> <tr> <th></th> <th>Screen</th> <th>Notes</th> </tr> <tr> <td>To and from dates separated</td> <td>     </td> <td> * +Probably less effort to implement * +More convenient for users who want to select only a date from or date to * \-Less convenient for users who want to select a date range * See [Code > Merge requests](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/?sort=created_date&state=opened&first_page_size=20) for an example of a date picker that hacks date range with 2 individual date fields {width="978" height="520"} </td> </tr> </table> # Design proposal The ideal UX would be to build a component variation of the date picker that allows users to select a date range in a single component. This may have to be a new component, or component variation of [GlDatepicker](https://design.gitlab.com/storybook/?path=/docs/base-datepicker--docs). May require some coordination with Pajamas. See https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1703#note_2540070091. <table> <tr> <th></th> <th>Screen</th> <th></th> </tr> <tr> <td>Date picker with range</td> <td>    </td> <td> * +More convenient for users who want to select a date range * \-Less convenient for users who want to select only a date from or date to * \-Probably more effort to implement as a filter that combines 2 input values (date from, date to) </td> </tr> </table>