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

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 :-)

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.

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.

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).

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.

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

You could use Trigger.io's UI module to use the native Android date / time picker with a regular HTML5 input. Doing that does require using the overall framework though (so won't work as a regular mobile web page).

You can see before and after screenshots in this blog post: date time picker

In HTML:

  <form id="my_form"><input id="my_field" type="date" /></form>

In JavaScript

   // test and transform if needed
    if($('#my_field').attr('type') === 'text'){
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  
    };

    // check
    if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){
        $('#my_field').removeClass('bad');
    } else {
        $('#my_field').addClass('bad');
    };

On your form elements use input type="time". It will save you all the hassle of trying to use a data picker library.