Cordova on iOS14 shows iOS keyboard instead of native HTML date-picker

Viewed 5851

When upgrading to iOS14, the HTML5 embedded date-picker ceases to work in my app. The iOS keyboard pops up instead of the usual native browser date-picker. Is this a bug?

I can manage to replicate the behavior by creating a new app in Cordova 9 using the simple hello-world app within the documentation.

An example of the HTML used that should pop-up the html5 date-picker follows:

  <input type="date" id="start" name="trip-start"
         value="2018-07-22"
         min="2018-01-01" max="2018-12-31">
5 Answers

As per the official Cordova documentation. Upgrading to Cordova-iOS 6.1.1 will resolve this issue.

I had the same problem with Cordova 9.0.0 (cordova-lib@9.0.1) and node 11.12.0,ionic 5.4.16

To solve this:

ionic cordova plugin add cordova-plugin-ionic-webview --save

wkWebview replace UIwebview

I can now use input type date and time correctly.

I have found this solution since I did not find more solutions due to this new release of ios14.

I worked with this library and I have modified some parts of the code that need

Download the file and add in your project library

Import library:

<script src="./js/rolldate.js"></script>

Add instance:

new Rolldate({
     el: '#date-group1-2',
     format: 'YYYY-MM-DD',
     beginYear: 2016,
     endYear: 2040
})

Add input:

<input readonly class="form-control" type="text" id="date-group1-2" placeholder="YYYY-MM-DD">

Result:

enter image description here

enter image description here

I am also faced same issue in my jQuery mobile app. Issue is because of in iOS 14 they upgraded the many widgets apart from Date picker.

Try by upgrading XCODE to 12 and Cordova 10, ensure you got sufficient memory in your mac/work station. and please verify does date picker issue still present or not.

I had the same problem with Cordova 8.1.2 and node 6.1.0.

To solve this, I upgraded to the following versions:

  • Cordova@•10.0.0
  • Node@10.15.0
  • cordova-ios@latest

I can now use input type date and time correctly.

Related