feat: improve datetime usage with inputs on desktop

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

The new date and time pickers are graphically beautiful, but the user experience is horrible, especially on the desktop. The complaints from our PWA users were that strong, we had to implement a new version of a date and time picker. As Ionic is heading towards a solution for mobile AND desktop, it should support the desktop scenario in a better way.

These are the issues with the components:

• A full datepicker looks clumsy in a form because it is so huge. This is a problem on mobile and desktop.
• We should have a modal version out of the box (which solves the problem above). In the docs, there is an example with a modal, but it needs additional CSS tweaking to make it work.
• When in a modal, there should be buttons to close it. In the given example, a user has to click outside of the modal to close it which is very unintuitive
• All scrollable options (months and time picker) are really bad on the Desktop. It is basically impossible to understand how it works for first-time users
• The time picker has no confirm button. Again, the user has to click outside of the overlay to save the time

---

Ideas to solve the issues:

1. In my opinion, a date picker should be an ion-input by default and open with a click in a modal as given below. Dates are relatively easy to insert with a keyboard. Hence, all you need is a good validator and a nice picker for mobile in addition.

This is my implemention using an ion-item with a ion-label, ion-input and ion-modal. Unfortunately, it was a lot of work and I think Ionic should offer something like this out of the box.

Once you click the icon on the right, a modal opens. Note the buttons below to confirm and close the modal. This is really important for the user experience, otherwise you would need to click outside the modal or press escape, which does not make sense.

Because the time picker is that awful on desktop, we had to split it from the date component. For the time picker one could use ion-input combined with ion-picker, which works quite well on both desktop and mobile. The validation for the input is much simpler with times of course, because you may only have values 0–23 and 0–59.

1. Another beautiful approach has been seen in the known calendar app “WeekCal”. Once the item with the datetime is clicked, a picker opens. Once you click somewhere else, the picker hides again (similar to an accordion).

This only works for running calendars though, because you would not want to select a date far away from now. The year is missing and there would probably not be enough space on mobile to show the “D-M-Y H:m” format.

---

If you are absolutely fond of the current datetime component, we could implement a new component (for example: ion-input-datetime) that implements scenario 1.

That said, is there currently a way to use the current ion-picker in the way as I described in number 2? I think inline template use of the picker is not possible yet.

Describe the Use Case

Desktop users could interact with the ion-datetime component in an acceptable way.

I will be happy to contribute some design ideas with some code, if requested.

Describe Preferred Solution

No response

Describe Alternatives

No response

Related Code

No response

Additional Information

We love Ionic and I hope that my criticism was not too harsh. I just wanted to help you understand the impression of real-world users of these components.

[bkarv]

Just our 2cents feedback we have on ion-datetime from our desktop users is the calendar day pick is very welcomed, thank you Ionic team for your hard efforts!

However, when trying to choose the year or month the wheel is very awkward via a mouse especially if you do not have mouse-wheel. In some ways step backwards to the original wheel as the cursors selects the text and it just doesn’t feel right on a desktop.

1. Can we please have a quick fix to remove the cursor text-select on years and month?

2. Is there any reason why Ionic can’t follow the similar year and month selections as you have done for days and like the other calendar widgets in Materials and ngx-Bootstrap?

Cursor Selecting text in Desktop mode

Ideal Month and Year Pickers

[sean-perkins]

@andreas-aeschlimann I think you raise very valid and real concerns regarding the UX of the date picker that will require a larger team communication after the New Year.

I do see the value in lower-effort quicker wins, like options to introduce common UX patterns like rendering confirmation buttons and/or enabling scroll indications.

I could also see value in encapsulating the new ion-datetime within ion-input, similar to how you can do: <ion-input type="datetime"> but with our custom web component instead of falling back to the browser.

I had not considered the extra complexity of value accessors in Angular, I do agree that’s a less ideal path if implementers have to manage that.

The value of the ion-datetime in its current state, is that it’s a freshly architected component in v6, with less overhead complexity by delegating a lot of the timezone conditions to other libraries that manage that well. This allows us additional capacity to closer evaluate UX patterns and shape the component in future minor releases of v6.

Appreciate the feedback 👍