[javascript] 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 :-)

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

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

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.

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_x000D_
    if($('#my_field').attr('type') === 'text'){_x000D_
        $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd');  _x000D_
    };_x000D_
_x000D_
    // check_x000D_
    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){_x000D_
        $('#my_field').removeClass('bad');_x000D_
    } else {_x000D_
        $('#my_field').addClass('bad');_x000D_
    };

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