Input type date shows wheels UI view instead of calendar UI

Ionic version:
5.6.0

Current behavior: On our ios app when we use the input type=“date” we are getting the traditional wheel view. (please see screenshot)

Expected behavior: The expected behavior here is to get the compact calendar view (available from iOS 14) as it is ADA compliant and also provide more flexibility for screen reader user to add date.

Steps to reproduce: I could get the compact calendar view in a fresh ionic app if I simply use input type=“date”, however in our production app it is showing the wheel view. what could possibly be the reason for ionic to show one over the other? what is causing it show the wheel view?

Hard to say without being able to reproduce the issue myself. Do you have a link where I can preview this date picker?

not able to reproduce it in a fresh ionic app, however, in the simulator it shows the calendar view, but after creating the build it shows wheel view in the app, does that help in anyway?

What version of iOS are you testing this on?

i’m testing on 14.4.1 for iOS.

What does your HTML for the input look like?

it’s simple input type=“date”

<label for="start">Start date:</label>

<input type="date" id="start" 
       value="2020-07-22"
       >

Thanks. I tried that out but am presented with the calendar view upon tapping the input. Without being able to reproduce the issue myself it is hard for me to give feedback on what may be causing this.

Where this does not seem to happen in an Ionic starter app, I recommend doing some debugging in your application by removing unnecessary code to see if you can isolate what is causing the issue.

Thanks for your support, we could fix the issue by updating the XCODE in the server, XCODE 11 was causing this it seems.

1 Like