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

问题

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 iOS 7. The most significant issue I have found is that <input type="datetime"/> is no longer supported.

I have seen several posted suggesting you need to now have two separate fields for date and time. This is a really huge change because I am using this all over the application. I am hoping this is just something broken in the beta release of iOS 7 since it is an HTML 5 standard input type but I can't seem to find any information.

Any help or thoughts would be greatly appreciated.

回答1:

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.

回答2:

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!

回答3:

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 "";
}
}

回答4:

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; 
}

来源：https://stackoverflow.com/questions/18445927/ios-7-mobile-safari-no-longer-supports-input-type-datetime