Question

之前使用过jQuery日期选择器，我现在已经将我网站上表单中的一些日期字段转换为HTML5日期选择器。

在文档中，它表示支持Safari：但是，它目前只显示一个文本字段（而Chrome和其他浏览器正确显示日期选择器）。

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

（同样不使用min属性）

这是我的代码行 - 我做错了什么，或者我只是阅读错误的文档并且Safari不支持它？

谢谢！

Answer 1

Safari的桌面版本不包含原生日期选择器（尽管它适用于iOS）。顺便说一下，IE也没有。这非常令人沮丧，因为它可以为开发人员节省大量时间。

这是用于跟踪对其的支持的有用链接：http://caniuse.com/#feat=input-datetime

Answer 2

2021/04/29 更新：已添加对 Safari 14.1 \o/

的支持

https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/

旧答案：

Safari 15（截至 2021/02/22 尚未发布）将提供原生日期选择器：

“从 2020 年 10 月 22 日发布的 Safari TP [TP = Technology Preview] 115 开始，macOS 支持 date、datetime-local 和 time 的 UI iOS。macOS 不支持月份输入类型，但适用于 iOS。macOS 和 iOS 不支持周输入类型。"

截图：

Answer 3

取自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();
    }); 
}

Answer 4

您可以像上面的示例一样使用正则表达式模式来验证占位符中的格式。这里是一个很好的起点，但是您可能想要创建自己的一个。

在Safari中尝试以下代码，而不添加有效的格式化值，例如文本字符串。

不正确的格式显示验证错误，正确的格式（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>

Answer 5

尽管没有Safari（或IE）的本机datepicker，一种不错的解决方法是在日期输入中添加placeholder属性。这会通知Safari和IE用户，后备文本输入应采用哪种格式（即yyyy-mm-dd）。

占位符不会显示在支持type="date"的浏览器上，因此此解决方法不会影响其他浏览器。

例如 <input type="date" placeholder="yyyy-mm-dd" />

Answer 6

对于使用 WordPress 的用户，使用此插件date and time picker

可以快速修复

您只需要在插件设置中传递CSS选择器，或仅传递input[type=date]

HTML5日期选择器不会在Safari上显示

6 个答案: