HTML5 date picker doesn't show on Safari

问题

Having previously used jQuery date picker, I have now converted some of the date fields in forms on my website to the HTML5 date picker.

On the documentation, it says Safari is supported: however, it currently shows just a text field (whereas Chrome and other browsers show the date picker correctly).

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

(the same applied without the min attribute)

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

Thank you!

回答1:

Safari does not include a native datepicker for its desktop version (although it does for iOS). Incidentally, neither does IE. It's very frustrating as it could save developers a lot of time if they did.

This is a useful link for tracking support for it: http://caniuse.com/#feat=input-datetime

回答2:

Although there is no native datepicker for Safari (or IE) a pretty good workaround is to add a placeholder attribute to the date input. This informs Safari and IE users which format the fallback text input should be (which is yyyy-mm-dd).

The placeholder doesn't display on browsers that support type="date" so this workaround won't affect other browsers.

e.g. <input type="date" placeholder="yyyy-mm-dd" />

回答3:

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

With jQuery and jQuery UI you can create a crossbrowser datepicker that only pops up when the browser doesn't support it natively. If you already have jQuery in your project, simply do:

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:

You can use a regex pattern to validate the format in the placeholder like in the example above. The one here is a good starting point but you may want to create your own.

Try the code below in Safari without adding a valid formatted value like a string of text.

Incorrect format shows a validation error, correct format (dd/mm/yyyy or dd-mm-yyyy) will submit the form, and it disappears.

<form>
<input type="date" placeholder="dd/mm/yyyy" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" required>
<button type="submit">Check if value is valid</button>
</form>

来源：https://stackoverflow.com/questions/35682138/html5-date-picker-doesnt-show-on-safari

标签

html

safari