[Feature Request]: Date picker component rework (Range with Calendar)

[pseudodesigner]

The problem

To me, the component has several interaction issues, which are hindering the usability of the component and causing confusion for users:

Scenario A: I want to select the end date first. If I try to select the end date first, my input is displayed as the start date, while the end input field remains in focus state. This is confusing, as I expect the value to be displayed in the end date input field. It is first displayed in the intended field after I have selected a start date.

Scenario B: I want to change the start date to a date that is greater than my selected period. If I want to change the start date to a date that is greater than the end date of my previously selected period, the new selected start date is changed to the end date and the start date is changed to the end date of the previously selected period. I would expect the component to replace my start date with my newly selected date and clear the end date entirely to let me know that a new period selection is being initiated. The end date field would then need to be in focus state.

Scenario C: I want to change the end date to a date lesser than my selected period. If I want to change the end date to a date that is lesser than the start date of my previously selected period, the new selected start date is changed to the end date and the start date is changed to the end date of the previously selected period. I would expect the component to display the new selected date as the start date and clear the end date entirely, as im initiating a new period selection. The end date field would then need to be in focus state.

Illustrated examples:

Scenario A: https://github.com/carbon-design-system/carbon/assets/49979990/fa167df6-fe8d-4add-a5cf-466be3d44b01

Scenario B: https://github.com/carbon-design-system/carbon/assets/49979990/68fb8837-33bd-43c7-a516-5aa21ff4417b

Scenario C: https://github.com/carbon-design-system/carbon/assets/49979990/ee0df54b-be64-4ba1-a4fb-c8206b8cbb69

The solution

Illustrated examples:

Scenario A: https://github.com/carbon-design-system/carbon/assets/49979990/6c5dffd2-0e85-41f1-a0a2-3787b1fd2907

Scenario B: https://github.com/carbon-design-system/carbon/assets/49979990/2870630c-3c03-4d21-8e26-d17df5fc9648

Scenario C: https://github.com/carbon-design-system/carbon/assets/49979990/a0f84008-abfb-48ec-ba41-e902d7f5a33f

Examples

No response

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[sstrubberg]

Thanks for opening this @pseudodesigner. Unfortunately, our roadmap is pretty slammed at the moment and we won't be able to address these for a bit, but know that we are very interested in refactoring DatePicker in the future.