html 5 input DateTime-Local any browser ios 9 native date time picker - how to select year?

Question

I'm working on an html 5 business application and someone just discovered something weird in Beta testing that I can't find an answer to.

We have a form with date/time input on it:

<input type="datetime-local" step="any" id="StartDate" name="StartDate" value="2015-09-10T10:20:29">

In Safari / Chrome or Firefox browser in iPad or iPhone (IOS 9.02 just confirmed but older versions as well) when I click on the input field it correctly brings up the native date/time picker, however there is no facility to change the year.

It's just not an option at all. Am I missing something fundamental or is this a bug in IOS? Note that this works fine in all other platforms we've tested on with Chrome / FireFox, just not on IOS with it's native picker.

Answer 1

Support for the full range of date type inputs is not yet available in the majority of browsers hence the issue you are getting here. In order to use them, one solution is to utilize a polyfill that provides functionality that the browser does not support.

http://html5please.com/#date

An example is the forms polyfill from the webshims library.

$.webshims.polyfill('forms forms-ext');

Then it is possible to select the year when using your example above.

Webshim link: http://afarkas.github.io/webshim/demos/

Configurator https://afarkas.github.io/webshim/demos/demos/cfgs/input-datetime-local.html#min=&max=&list=&step=&value=&startView=0&minView=0&stepfactor=&useDecadeBase=0&startValue=&calculateWidth=on&popover=&popover=&popover=

and fiddle https://fiddle.jshell.net/trixta/VNuct/light/ from the developer provide additional information on the use of webshims.