Request: <ion-input type="date"> Ionic 5 & angular

Ionic Framework Ionic Angular
1

This is more of a request to the ionic team. I am working in ionic 5, and if this is a feature that will be added to ionic 7 (or if it is currently in 6) please let me know. I have not found any documentation about it.

Ion-input type=date doesn’t allow for min and max to be added, and it doesn’t allow for default values. It also relies on the browser to supply the default calendar picker which is unintuitive (year select, then month, then day) and does not match the styling.

Chrome:
image

Firefox:

image

Edge:
image

I understand that the intention is to use either ion-datetime or ion-picker, however these controls are not desktop friendly and do not allow for typing control, which is what many users will prefer to use. Hence, the desire to use input type=“date” over a different ionic component. However, this one does not allow a user to type on Safari, which is also problematic as the current apple control is, in my opinion, the most unintuitive out of all the default calendar selection tools.

My request is this:

Flesh out ion-input type=“date”.

  • Allow the ‘max’ option to be used.
  • Allow the ‘min’ option to be used.
  • Allow the calendar select to be a set of options: browser native, ion-datetime, ion-picker, or disabled (keyboard only with the date validators and auto formatting currently included).
  • Allow mobile users the option to type or use a calendar picker (if picker enabled).

If there is a better place to post this, please let me know. This is a feature which our team has been wrestling with for some time and work on this component type would be extremely appreciated.

Thank you for reading.

2 Likes
2

How so? The Ion-datetime component pops up a dialog just fine on our desktop App. As for type control, Not all users prefer to use type control. In many cases, It’s a lot easier to tap on the correct values than enter them and it also reduces the user typed errors.

In your case, just use the normal html input tag if you’d like to get full control and edit it the way you like.

3

It’s been our team’s consensus that ion-datetime it is not desktop friendly because it forces a user to click instead of being able to type and then tab or enter to the next field. Furthermore the calendar forces year → month → day select which has been a part of significant user complaint in the past, so not it is not an option for our project.

The ion-input type=“date” control is pretty good on desktop. If the calendar picker could be disabled or changed, and if the typing ability carried over to mobile we would use it. It’s very close to being perfect, but has some strange limitations, hence the request. If this works differently in future Ionic versions I would like to know.