Question

We are using Mobiscroll (http://code.google.com/p/mobiscroll/) as Date Picker solution in our smartphone product.

It works great in desktop browser, android 2.3, IPhone 4S – any date formats. But, it works in IPhone 5 (version 5.0.1 to be precise) only if date format is yyyy-mm-dd.

Since, the format of date comes from excel sheet, we have no control over there so the picker have to work with variety of formats.

Steps to reproduce the problem:

1. Setup a page and input type=”date” to use mobiscroll. You can use
   mobiscroll demo page (http://demo.mobiscroll.com/)

2. Have any format different than yyyy-mm-dd, lets say mm/dd/yyyy so
   put the value of input type=”date” as value=”09/27/2012″.

3. Open the page in IOS 5.

Expected:
When we click on the date picker, the picker should be loaded with given initial value and we should be able to set it to new value. Also, the format should be preserved even after the setting a new value.

Actual:
The input field comes as empty. The picker shows today’s date, and when I click to “Set” in the picker, the value is not set into the input field.

We are using mobiscroll 2.0 rc3.

Possible cause:
I think this issue is some how related to the browser support for the html input type. We tested in Iphone 4S too, there we do not have any issue. What we have found is that Iphone 4S does not support for input type=”date” (As checked with Modernizr) but the Iphone 5 has.

We have not yet found the exact location for the fix but we at least feel that cause could be possibly this.

Answer 1

According to HTML5 specification working draft, the date input requieres the value to be in ‘yyyy-mm-dd’ format (http://www.w3.org/TR/html-markup/input.date.html#input.date)

So I recommend either not using input type=”date” or reformat your initial date values. I understand that you have no control over the excel sheet, but you could reformat the dates when reading the values from the excel file.