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  lt input type  date  gt 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  lt select gt  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  -

User · Answer

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

User · Answer

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

User · Answer

iOS 5 now supports HTML5 better  in your webapp do   lt input type  date  name  date    gt    Android as of 4 0 lacks this type of native menu support

User · Answer

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    lt input type  text  onclick  onInputClick this   value  2014-01-01  gt

User · Answer

Since some years some devices support  lt input type  date  gt  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  lt input gt  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  lt input type  date  gt  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

User · Answer

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

User · Answer

In HTML      lt form id  my form  gt  lt input id  my field  type  date    gt  lt  form gt    In JavaScript   x000D   x000D        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         x000D   x000D   x000D

User · Answer

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

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

Examples related to javascript

Examples related to iphone

Examples related to android

Examples related to ios

Examples related to html