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

i'm trying explore posibilities running native web-app on different platforms using html5. currently, <input type="date">field opens standard soft keyboard on android , ios. suppose in future mobile os's soft keyboards include date pickers , such - <select> invokes native select today.

since isn't implemented on either android or ios, implemented in native ui, possible web-app invoke native date picker, i.e. when clicked on?

this make possible stop using javascript libraries jquery mobile , yui.

if question in way unclear, please tell me. thank in advance :-)

since years devices support <input type="date"> others don't, 1 needs careful. here observations 2012, still might valid today:

• one can detect if type="date" supported setting attribute , reading value. browsers/devices don't support ignore setting type date , return text when reading attribute. alternatively, modernizr can used detection. beware it's not enough check android version; samsung galaxy s2 on android 4.0.3 support type="date", google/samsung nexus s on more recent android 4.0.4 not.

• when presetting date native date picker, sure use format device recognizes. when not doing that, devices might silently reject it, leaving 1 empty input field when trying show existing value. using date picker on galaxy s2 running android 4.0.3 might set <input> 2012-6-1 june 1st. however, when setting value javascript, needs leading zeroes: 2012-06-01.

• when using things cordova (phonegap) display native date picker on devices don't support type="date":

  • be sure detect built-in support. in 2012 on galaxy s2 running android 4.0.3, erroneously also using cordova android plugin result in showing date picker twice in row: once again after clicking "set" in first occurrence.

  • when there's multiple inputs on same page, devices show "previous" , "next" form field. on ios 4, not trigger onclick handler , hence gives user regular input. using onfocus trigger plugin seemed work better.

  • on ios 4, using onclick or onfocus trigger 2012 ios plugin first made regular keyboard show, after date picker placed on top of that. next, after using date picker, 1 still needed close regular keyboard. using $(this).blur() remove focus before date picker shown helped ios 4 , did not affect other devices tested. introduced quick flashing of keyboard on ios, , things more confusing on first usage date picker slower. 1 disable regular keyboard making input readonly if 1 using plugin, disabled "previous" , "next" buttons when typing in other inputs on same screen. seems ios 4 plugin did not make native date picker show "cancel" or "clear", i guess that's ios 4 thing.

  • on ios 4 ipad (simulator), in 2012 cordova plugin did not seem render correctly, not giving user option enter or change date. (maybe ios 4 doesn't render native date picker nicely on top of web view, or maybe web view's css styling has effect, , surely might different on real device: please comment or edit!)

  • though, again in 2012, android date picker plugin tried use same javascript api ios plugin, , example used allowolddates, android version did not support that. also, returned new date 2012/7/2 while ios version returned mon jul 02 2012 00:00:00 gmt+0200 (cest).

• even when <input type="date"> supported, things might messy:

  • ios 5 nicely displays 2012-06-01 in localized format, 1 jun. 2012 or june 1, 2012 (and updates while still operating date picker). however, galaxy s2 running android 4.0.3 shows ugly 2012-6-1 or 2012-06-01, no matter locale used.

  • ios 5 on ipad (simulator) not hide keyboard when visible when touching date input, or when using "previous" or "next" in input. simultaneously shows date picker below input and keyboard @ bottom, , seems allow input both. however, though change visible value, keyboard input ignored. (shown when reading value, or when invoking date picker again.) when keyboard not yet shown, touching date input shows date picker, not keyboard. (this might different on real device, please comment or edit!)

  • devices might show cursor in input field, , long press might trigger clipboard options, possibly showing regular keyboard too. when clicking, devices might show regular keyboard split second, before changing show date picker.