Html HTML5 日期选择器不显示在 Safari 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35682138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 date picker doesn't show on Safari
提问by Will WP
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.
以前使用过 jQuery 日期选择器，现在我已经将我网站上表单中的一些日期字段转换为 HTML5 日期选择器。
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).
在文档中，它说支持 Safari：但是，它目前只显示一个文本字段（而 Chrome 和其他浏览器正确显示日期选择器）。
echo "<input type='date' name='Date' min='$todaymin'>";
(the same applied without the min attribute)
（同样适用于没有 min 属性的情况）
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?
这是我的代码行 - 我是不是做错了什么，还是我只是阅读了错误的文档并且它在 Safari 中不受支持？
Thank you!
谢谢！
回答by kevin
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.
Safari 不包括其桌面版本的本地日期选择器（尽管它适用于 iOS）。顺便说一句，IE 也没有。这非常令人沮丧，因为如果他们这样做，它可以为开发人员节省大量时间。
This is a useful link for tracking support for it: http://caniuse.com/#feat=input-datetime
这是跟踪支持的有用链接：http: //caniuse.com/#feat=input-datetime
回答by Finlay Percy
Although there is no native datepicker for Safari (or IE) a pretty good workaround is to add a placeholderattribute to the date input. This informs Safari and IE users which format the fallback text input should be (which is yyyy-mm-dd).
尽管 Safari（或 IE）没有原生日期选择器，但一个很好的解决方法是向placeholder日期输入添加一个属性。这会通知 Safari 和 IE 用户回退文本输入的格式（即yyyy-mm-dd）。
The placeholder doesn't display on browsers that support type="date"so this workaround won't affect other browsers.
占位符不会在支持的浏览器上显示，type="date"因此此解决方法不会影响其他浏览器。
e.g.
<input type="date" placeholder="yyyy-mm-dd" />
例如
<input type="date" placeholder="yyyy-mm-dd" />
回答by drjorgepolanco
Taken from http://www.javascriptkit.com/javatutors/createelementcheck2.shtml
取自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:
使用 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();
});
}
回答by conordarcy
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.
在 Safari 中尝试下面的代码，而不添加像文本字符串这样的有效格式化值。
Incorrect format shows a validation error, correct format (dd/mm/yyyy or dd-mm-yyyy) will submit the form, and it disappears.
不正确的格式显示验证错误，正确的格式（dd/mm/yyyy 或 dd-mm-yyyy）将提交表单，然后消失。
<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>