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

Question

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">

I'm seeing the same with cordova 9, cordova-ios 5.1.1, ios 14.2 — Victor Babel, Sep 23 '20 at 02:01
I've logged an issue with apple via the developer portal and will update you all if I get a response. — Ray Hammond, Sep 23 '20 at 07:59
Is there a way we can follow the issue you submitted on the developer portal? — Mike Becatti, Sep 29 '20 at 13:05

score 2 · Answer 1 · answered Oct 08 '20 at 10:10

2

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

answered Oct 08 '20 at 10:10

Tabish Sohail

1,040
2
9
22

2

This answer would be improved by a link to the relevant Cordova documentation and a block quote of the relevant text. – TylerH Oct 12 '20 at 14:21

score 2 · Answer 2 · answered Oct 19 '20 at 01:54

2

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.

answered Oct 19 '20 at 01:54

Xiamen_Eric

21
1

It was the fastest and most viable solution for me, as I cannot update my cordova platform because my code is old (angularJS), and some plugins do not support this new update, thanks – Edson Filho Oct 26 '20 at 20:21

score 1 · Answer 3 · answered Oct 02 '20 at 16:29

1

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:

answered Oct 02 '20 at 16:29

Santiago Vasquez

149
1
10

1

Thanks for the suggestion! It worked well for me,just need to modify some lang in js then the date roller worked just the way I want. – Tim Oct 14 '20 at 08:02
@santiago-vasquez Do you have a library website? or could you explain to me how to use in angularjs – Edson Filho Oct 26 '20 at 19:14
https://github.com/weijhfly/rolldate - this is a link to their website – Raphael Nov 12 '20 at 11:36

Sharana · Answer 4 · 2020-09-24T06:13:38.847

0

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.

edited Sep 24 '20 at 06:13

answered Sep 24 '20 at 05:57

Sharana

35
7

1

Thanks, for the reply. I have already upgraded to Xcode 12 and Cordova 9 which is the latest. The issue persists. – Ray Hammond Sep 24 '20 at 07:38
Try upgrading UIWebview to WKWebview, this is like massive change, you might be knowing that after Dec 2020 UI Webview app will be rejected in app review process. Note: Cordova 10 is available. – Sharana Sep 25 '20 at 06:18
1

silly question, how does one upgrade to WKWebview? Is this what Cordova 10 does for me? – Ray Hammond Sep 25 '20 at 07:40
In a Cordova project you don't have any evidences of WKWebview or UIWebview.. Ray, how do you compile your app? With some online tool? – Piero Alberto Sep 25 '20 at 08:08
Yes, Cordova 10 does for you. no need to add explicitly. – Sharana Sep 25 '20 at 08:36
1

I run "cordova build ios", I've not seen any reference to UIWeView, but, I am aware of its deprecation. Is there a flag I need to change in cordova config? – Ray Hammond Sep 25 '20 at 08:37

score 0 · Answer 5 · edited Oct 12 '20 at 14:20

0

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.

edited Oct 12 '20 at 14:20

TylerH

20,799
66
75
101

answered Sep 25 '20 at 12:58

Modship

57
1
6

1

This is the route I'm attempting too but I fear that many of my plugins aren't compatible. What I was hoping would be a quick fix is turning into a major undertaking. – Mike Becatti Sep 25 '20 at 20:23
@PieroAlberto I've got to Cordova 9, but, not 10 yet. I will update the post when I do. – Ray Hammond Oct 01 '20 at 10:11
@RayHammond I solved using the cordova ios 6.1.1 to build the ipa and it works – Piero Alberto Oct 01 '20 at 15:10
Did you find any solution? was this version 6.1.1 useful for someone else? – Santiago Vasquez Oct 02 '20 at 05:42

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

5 Answers5