Determine how range mode date selection in calendar dropdown should work

[asudoh]

In #5310 and #5445 people are re-iterating their complaints against the range mode date picker's behavior not closing the calendar dropdown until both start/end dates are selected. This issue is for gathering @carbon-design-system/design's thoughts on the to-be scenario around it.

[designertyler]

I met with @dakahn and we agreed that the UX issue could be resolved by having two distinct calendar dropdowns for each field to achieve the desired experience for all users.

Another issue that popped up was that we lose the context of which date we are entering when the focus state moves down to the calendar.

In this screenshot, the user is focused on the 26th and there's no way to tell if this is meant for the start or end date.

One proposed solution is to have the date text selected so visual keyboard users know which field they are entering a value.

[asudoh]

Thank you for the update @designertyler!

having two distinct calendar dropdowns for each field to achieve the desired experience for all users.

Does it mean one of below, or both?

1. Showing single selection per calendar dropdown (e.g. 3th for one, 17th for another) instead of selection of start/end dates (showing both of 3th/17th like above screenshot)
2. Calendar dropdown for end date aligned to end date's <input>

One proposed solution is to have the date text selected so visual keyboard users know which field they are entering a value.

How about changing the background color of <input>?

[designertyler]

@asudoh

1. Ideally, there wouldn't be a visual or behavior change from the experience today. The difference would be that in code you have a calendar for the start date, you select a start date, and the calendar changes to become the selection for the end date. The switch between the two calendars wouldn't be perceived by the visual user but lets the keyboard user know they are on the end date input. Right now my understanding is that all of this interaction happens on the start date field... it's hard to explain and @dakahn had an example of this behavior working in another system.

2. I'd like to keep visuals the same for now. This may be an option if there are no other ways to indicate which start or end date field is selected.

I think changing the background is worth exploring. I don't know anywhere else in our system that is doing selection and input like this so I'd like to run options by the rest of the design team.

[asudoh]

@designertyler

The difference would be that in code you have a calendar for the start date, you select a start date, and the calendar changes to become the selection for the end date.

I see, do you think this is a dev-ready UX change to go forward?

Right now my understanding is that all of this interaction happens on the start date field...

IIUC current UX is:

1. When user first launches calendar dropdown, it lets user select both start/end dates
2. After 1. whether start date or end date changes upon calendar dropdown selection depends on context:
   • If user selects a date that is earlier than current start date, then the selected date will be the new start date regardless of where the calendar dropdown is launched from
   • If user selects a date that is between current start date and current end date, then the date where the calendar dropdown is launched from is updated
   • If user selects a date that is later than current end date, then the selected date will be the new end date regardless of where the calendar dropdown is launched from

I see 2. above is Flatpickr’s strategy to avoid the condition where end date is earlier than the start date. Wondering if you would have an alternate UX strategy here.

[tw15egan]

Is there any action we want to take on this issue?

[asudoh]

@tw15egan Setting on the UX is what this issue is mostly about. If we have settled on the current UX no action is needed.

[tw15egan]

Thanks, Akira! Will close this since I don't think we are planning any UX changes in the near future, but we can open this and revisit it if that changes 👍