IOS 7 mobile Safari no longer supports <input type = "datetime" / ">

Question

I have a pretty large iPad app built with PhoneGap, and I did some testing to make sure everything works on iOS . 7. The most significant problem I found that <input type="datetime"/> no longer supported.

I saw several posts posted saying that you need to have two separate fields for date and time. This is really a huge change because I use it throughout the application. I hope this just something broke in the beta version of iOS 7, as this is the standard input type of HTML 5, but I can not find any information.

Any help or thoughts are appreciated.

Answer 1

datetime support is removed, but you can use datetime-local . From what I hear (I can’t say from anyone), he is here to stay.

Answer 2

It looks like this input type has been removed in iOS 7

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

After Google Chrome, Safari on iOS now does not support datetime, and it will return to the text. This type was deprecated in the standard in favor of using two inputs, a date and time for the same purpose. The problem is that datetime is compatible with iOS from version 5.0 to 6.1; if you use it, be careful!

Answer 3

I ended up using local datetime-local, but you need to make sure that you consider the time zone when binding to and from the control. We want to save GMT time in the database. I used the functions below to convert back and forth during snapping.

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

Answer 4

See link here

Your CSS should be modified as follows:

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