Geek Answers Handbook

HTML5 selection output not showing up in Safari

Using jQuery date picker before, I now converted some date fields into forms on my website into an HTML5 date picker.

The documentation says that Safari is supported: however, currently it only displays a text box (while Chrome and other browsers display the date correctly).

echo "<input type='date' name='Date' min='$todaymin'>";

(the same applies without the min attribute)

This is my line of code - am I doing something wrong or am I just reading the documentation incorrectly and is not supported in Safari?

Thank!

+20
source share
3 answers

Safari datepicker ( iOS). , IE. , , .

: http://caniuse.com/#feat=input-datetime

+38

http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

jQuery jQuery UI , , . jQuery , :

var datefield = document.createElement("input")

datefield.setAttribute("type", "date")

if (datefield.type!="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
    document.write('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />\n')
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n') 
}        
if (datefield.type != "date"){ //if browser doesn't support input type="date", initialize date picker widget:
    $(document).ready(function() {
        $('#your-date').datepicker();
    }); 
}
+4

Although Safari (or IE) does not have a built-in date picker, a pretty good workaround is to add an attribute placeholderto enter the date. This informs Safari and IE users about what format the fallback text input should be (this yyyy-mm-dd).

Placeholder does not appear in browsers that support type="date"therefore this workaround will not affect other browsers.

eg, <input type="date" placeholder="yyyy-mm-dd"/>

0
source

More articles:


All Articles