[Feature Request]: Date picker component enhancement: combined date and time picker

[KevinCamelo]

Summary

We're seeking an approved proposal to enhance Carbon's date picker component to support combined date and time inputs within the same fields.

This enhancement to date picker would be useful for when users need to filter down data between a specific date and time. It would also minimize the amount of space needed to display time picker and single with calendar side by side, while also creating a mental connection to help our users to understand which date corresponds to which time.

With AM & PM	Without AM & PM

Justification

While date picker (and it's variants) work for many use cases, we've noticed that they can become overbearing when shown side by side when used to ask the user for a date and time range. In addition, when date picker is currently implemented, a visual disconnect is created between the date and the relevant time.

Current Process

Process with Proposed Enhancement

Since this would be an enhancement on top of date picker's current offering, we are reaching out for development assistance.

Desired UX and success metrics

The combined date and time enhancement to Date picker will provide a visual indicator for users to choose a date and a corresponding time. It's functionality should mirror Carbon's current date picker and time picker, as it just has been combined into one smaller component.

Success metrics:

• Users should be able to identify the ability to select a date from a calendar and its corresponding time.
• Change the way a calendar is displayed based on their pre-defined IBM Cloud settings. (A user in Ireland would likely not use AM or PM, thus they should be shown Date and Time Picker without Meridiem.
• Warn users when their choice invalid.

Required functionality

The required functionality should mirror what is currently seen on the documentation for Date Picker. However, one added requirement would be changing the way time picker and date picker are displayed based on a users predefined settings on IBM Cloud.

A user in Ireland would likely not use AM or PM, thus they should be shown Date and Time Picker without Meridiem.

Specific timeline issues / requests

Three users have asked us for this refined functionality in the past two months. While there is no defined deadline, it would be nice to have as an option. We'd love to work with Carbon to make this happen.

Available extra resources

Design resources: our team can create usage and style templates, create additional guidance, and help bring this to life!

Development resources: A developer has agreed to work with Cloud PAL to contribute this as an enhancement to Carbon.

Code of Conduct

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

[sstrubberg]

Hey @KevinCamelo, just wanted to give you a heads up that we had a discussion around this one during our Backlog Cleaning meeting this morning.

Here are some notes:

As we were walking through your spec, @tw15egan took it upon himself to do a quick POC in Codesandbox. We think this gets you about 95% to where you're looking to go. Can you confirm this?

Also, as-is, DatePicker/TimePicker is currently built on top of a technology called Flatpickr. This comes with a unique set of challenges to maintain and enhance our DatePicker/TimePicker component. Having said that, we are currently having conversation around the future of datepicker of which we will definitely want to consider this spec as part of that.

[tw15egan]

There are issues with the example CodeSandbox; most notably, the DatePicker assumes the second child will be DatePickerInput. If we are to support this, we'd need to change DatePicker with a type="range" to look for DatePickerInput elements precisely, and render other children as-is

[KevinCamelo]

@sstrubberg @tw15egan Thank you for looking into date/time picker and their relationship. I noticed that Carbon has date picker on the 2023 roadmap. Is there any progress on that/any resources you might need? 😄

[sstrubberg]

@KevinCamelo Absolutely! I'll connect with you on Slack and we'll figure out what supporting this effort looks like.