Invoke native date picker from web-app on iOS/Android

Question

I'm trying to explore the posibilities with running a native web-app on different platforms using HTML5. Currently, an <input type="date">field just opens the standard soft keyboard on Android and iOS. I suppose that in the future the mobile OS's soft keyboards will include date pickers and such - just as <select> invokes the native select today.

Since this isn't implemented on either Android or iOS, but is implemented in native UI, is it possible for a web-app to invoke the native date picker, i.e. when clicked on?

This would make it possible for us to stop using JavaScript libraries like jQuery mobile and YUI.

If my question is in any way unclear, please tell me. Thank you in advance :-)

Solution 1

Since some years some devices support <input type="date"> but others don't, so one needs to be careful. Here are some observations from 2012, which still might be valid today:

• One can detect if type="date" is supported by setting that attribute and then reading back its value. Browsers/devices that don't support it will ignore setting the type to date and return text when reading back that attribute. Alternatively, Modernizr can be used for detection. Beware that it's not enough to check for some Android version; like the Samsung Galaxy S2 on Android 4.0.3 does support type="date", but the Google/Samsung Nexus S on the more recent Android 4.0.4 does not.

• When presetting the date for the native date picker, be sure to use a format the device recognizes. When not doing that, devices might silently reject it, leaving one with an empty input field when trying to show an existing value. Like using the date picker on a Galaxy S2 running Android 4.0.3 might itself set the <input> to 2012-6-1 for June 1st. However, when setting the value from JavaScript, it needs leading zeroes: 2012-06-01.

• When using things like Cordova (PhoneGap) to display the native date picker on devices that don't support type="date":

  • Be sure to properly detect built-in support. Like in 2012 on the Galaxy S2 running Android 4.0.3, erroneously also using the Cordova Android plugin would result in showing the date picker twice in a row: once again after clicking "set" in its first occurrence.

  • When there's multiple inputs on the same page, some devices show "previous" and "next" to get into another form field. On iOS 4, this does not trigger the onclick handler and hence gives the user a regular input. Using onfocus to trigger the plugin seemed to work better.

  • On iOS 4, using onclick or onfocus to trigger the 2012 iOS plugin first made the regular keyboard show, after which the date picker was placed on top of that. Next, after using the date picker, one still needed to close the regular keyboard. Using $(this).blur() to remove focus before the date picker was shown helped for iOS 4 and did not affect other devices I tested. But it introduced some quick flashing of the keyboard on iOS, and things could be even more confusing on first usage as then the date picker was slower. One could fully disable the regular keyboard by making the input readonly if one were using the plugin, but that disabled the "previous" and "next" buttons when typing in other inputs on the same screen. It also seems the iOS 4 plugin did not make the native date picker show "cancel" or "clear".

  • On an iOS 4 iPad (simulator), in 2012 the Cordova plugin did not seem to render correctly, basically not giving the user any option to enter or change a date. (Maybe iOS 4 doesn't render its native date picker nicely on top of a web view, or maybe my web view's CSS styling has some effect, and surely this might be different on a real device: please comment or edit!)

  • Though, again in 2012, the Android date picker plugin tried to use the same JavaScript API as the iOS plugin, and its example used allowOldDates, the Android version actually did not support that. Also, it returned the new date as 2012/7/2 while the iOS version returned Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

• Even when <input type="date"> is supported, things might look messy:

  • iOS 5 nicely displays 2012-06-01 in a localized format, like 1 Jun. 2012 or June 1, 2012 (and even updates that immediately while still operating the date picker). However, the Galaxy S2 running Android 4.0.3 shows the ugly 2012-6-1 or 2012-06-01, no matter which locale is used.

  • iOS 5 on an iPad (simulator) does not hide the keyboard when that is already visible when touching the date input, or when using "previous" or "next" in another input. It then simultaneously shows the date picker below the input and the keyboard at the bottom, and seems to allow any input from both. However, though it does change the visible value, the keyboard input is actually ignored. (Shown when reading back the value, or when invoking the date picker again.) When the keyboard was not yet shown, then touching the date input only shows the date picker, not the keyboard. (This might be different on a real device, please comment or edit!)

  • Devices might show a cursor in the input field, and a long press might trigger the clipboard options, possibly showing the regular keyboard too. When clicking, some devices might even show the regular keyboard for a split second, before changing to show the date picker.

Solution 2

iOS 5 now supports HTML5 better. in your webapp do

<input type="date" name="date" />

Android as of 4.0 lacks this type of native menu support.

Solution 3

Give Mobiscroll a try. The scroller style date and time picker was especially created for interaction on touch devices. It is pretty flexible, and easily customizable. It comes with iOS/Android themes.

Solution 4

iOS5 has support for this (Reference). If you want to invoke the native date picker you might have a an option with PhoneGap (have not tested this myself).

Solution 5

My answer is over-simplistic. If you like to write simple code that works cross-platform, then use the window.prompt method to ask the user for a date. Obviously you need to validate with a regex and then create the date object.

function onInputClick(e){
var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01");
if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){
    //date ok
    e.value=r;
    var split=e.value.split("-");
    var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2]));
}else{
    alert("Invalid date. Try again.");
}
}

In you HTML:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

View more solutions

Comments

[Daniel Trebbien]

See also stackoverflow.com/questions/388814/…

[Siddharth]

I found that the easiest way would be to use input[type=text] and then on ng-click open the native date picker using javascript.

[Michael]

@Siddharth That's a decent suggestion... for some reason on Android 7, the input type=date brings up a totally different picker than the native date picker (you can't flick-scroll it with your finger, for example). By the way, how do you open the "native" date picker in javascript, anyway?

[hnilsen]

Hm, this is basically the opposite of what I'd use. It's not speedy, it's not easy to maintain and it's not looking like anything but iOS, default Android and Sense. Thank you for your contribution, though :-)

[hnilsen]

Your answer is just as right as Eirik Hoem's answer. Android 4.0 still doesn't support this is a disaster. Shame on you, Google!

[Leo]

I'm finding mobiscroll very buggy and unreliable on HTC Desire native browser. At best it seems laggy, but frequently the scrolling sticks so it just whizzes through dates continuously.

[Arjan]

Nowadays, Android 4.0.3 on the Samsung Galaxy S2 supports this, but 4.0.4 on the Nexus S does not, @hnilsen.

[Arjan]

Er, no: I'm not saying Android 4.0.3 supports it, but: Android 4.0.3 on the Galaxy S2 does...

[DA.]

Can you confirm the plugin actually triggers the native control (vs. rendering a JS emulation of the native control)?

[DA.]

Well the original question is about doing it in the web browser itself. Your answer goes in to PhoneGap territory, though and the 'gotchas' seemed to imply that perhaps PhoneGap wasn't triggering the native control, but rather it was using JavaScript to mimic the native control. But, if I understand your reply, the PhoneGap plug in is, indeed, triggering the native device OS date picker outside of mobile safari.

[DA.]

I'm still a little confused about what the PhoneGap plugin is firing. For instance, you state the iPad has rendering issues. Why would it render the native control incorrectly? (I'll go though my older questions too...)

[Arjan]

Why the iPad (simulator) fails to show its own native date picker when triggered from the plugin I don't know, unfortunately. Maybe something in the plugin Objective C code is wrong, or maybe somehow showing the date picker on top of a web view is troublesome, or maybe it's even the CSS styling of the web page I use that somehow affects it (while it shouldn't). But all is about the native date pickers; peek into the Java, it's quite small.

[Levi Kovacs]

It works much better on iOS. However... I'm using it on HTC Desire HD, and the 2.0 seems improved. And it seems to work even better on other android browsers, like Dolphin for example.

[Parker Ault]

Be aware that WP7 is not supported by mobiscroll and this bug ticket has been open for over a year: code.google.com/p/mobiscroll/issues/…

[Neromancer]

The Datepicker phonegap plugins (github.com/phonegap/phonegap-plugins) for iOS and Android both definitely use the native control, and do not use JS to do any mimicing.

[Arjan]

@Neromancer, you're right, but I am not sure who you're responding to? Is something I wrote not clear? (The iOS and Android plugin have a different JavaScript binding towards the native controls they expose, if that's what you're referring to. In fact, I still have pull-request-to-be to give both the same interface, but I haven't found the time to actually make those happen...)

[Levi Kovacs]

Where is the Windows Phone support? See post: blog.mobiscroll.com/where-is-the-windows-phone-support

[Olivier]

You can use a native pickerView with PhoneGap/Cordova with the following plugin: github.com/mgcrea/cordova-pickerview

[Arjan]

Nice. But see also Detecting an “invalid date” Date instance in JavaScript. (You could try to make the regex a bit better, like to not accept months > 12, but the maximum day would still be hard.)

[Jay Shukla]

I'm using this for android in ionic app. It works fine but I make this input as hidden and firing click event when user click on div so it's not working. any idea?

[Michael]

Sorry, but ISO8601 is beautiful and it bugs me to no end when I have to resort to tricks to use it.

[EoghanM]

A caveat: on iOS, the 'onchange' event fires when you change just one of the 3 controls for day/month/year. This is premature, as the user could be changing more than one and then tapping 'Done' to confirm the new date. I had to use the 'onblur' event instead.