iOS 7 mobile Safari no longer supports <input type=“datetime”/>

Question

I have a rather large iPad application built using PhoneGap and I was doing some testing to make sure everything was going to work appropriately in

Answer 1

It looks like this input type was removed in iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

Following Google Chrome, now Safari on iOS doesn’t support the datetime input type anymore and it will fallback to text. This type was deprecated in the standard in favor of using two inputs, date and time for the same purpose. The problem is that datetime was compatible with iOS from version 5.0 to 6.1; if you are using it, be careful!

Answer 2

See the reference here

Your CSS should be change as below:

{ 
align-items: center;
display: -webkit-inline-flex; 
overflow: hidden; 
padding: 0px; 
-webkit-padding-start: 1px; 
}

Answer 3

Support for datetime has been removed, but you can use datetime-local instead. From what I hear (can't say from whom) it's here to stay.

Answer 4

I ended up using the datetime-local but you have to make sure you take into account the timezone when binding to and from the control. We want to store GMT time in the database. I used the below functions to convert back and forth during binding.

function formatHTML5DateTime(date)
{
try
{
    if (typeof(date) == 'undefined' || date == null || date == '') return "";

    var tmpDate = new Date(date);
    // gets the timezone offset in minutes
    var offset = tmpDate.getTimezoneOffset();
    // apply the timezone offset in reverse to local time
    var newDate = tmpDate.addMinutes(Math.abs(offset) * -1);

    return newDate.toISOString().replace("Z", "");
}
catch(e)
{
    return "";
}
}

function formatJSDate(date)
{
try
{
    if (typeof(date) == 'undefined' || date == null || date == '') return "";

    var tmpDate = new Date(date);
    // gets the timezone offset in minutes
    var offset = tmpDate.getTimezoneOffset();
    // apply the timezone offset to UTC time
    var newDate = tmpDate.addMinutes(offset);

    return newDate.toISOString();
}
catch(e)
{
    return "";
}
}