Safari 上不显示 HTML5 日期选择器

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

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

---

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

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

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

---

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

使用 jQuery 和 jQuery UI，您可以创建一个跨浏览器日期选择器，仅当浏览器本身不支持它时才会弹出。如果您的项目中已经有 jQuery，只需执行以下操作：

var dateClass='.dateck'; $(document).ready(function () { if (document.querySelector(dateClass).type !== 'date') { var oCSS = document.createElement('link'); oCSS.type='text/css' ; oCSS.rel='stylesheet'; oCSS.href='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css'; oCSS.onload=function() { var oJS = document.createElement('script'); oJS.type='text/javascript'; oJS.src='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui. min.js'; oJS.onload=function() { $(dateClass).datepicker(); } document.body.appendChild(oJS); } document.body.appendChild(oCSS); } });

---

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

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

老答案：

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

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

https://bugs.webkit.org/show_bug.cgi?id=119175#c20

https://webkit.org/status/#feature-date-and-time-input-types

截图：

https://twitter.com/stefanjudis/status/1320259247750381568

https://twitter.com/foolip/status/1319559899358089216

---

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

在 Safari 中尝试下面的代码，而不添加像文本字符串这样的有效格式化值。

不正确的格式显示验证错误，正确的格式（dd/mm/yyyy 或 dd-mm-yyyy）将提交表单，然后消失。

检查值是否有效

---

对于使用 WordPress 的用户，可以使用此插件进行快速修复date and time picker

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

---

我使用了@drjorgepolanco 给出的建议并进行了一些修改：

函数 displayDatePickerIfBrowserDoesNotSupportDateType() { var datePicker = document.querySelector('.date-pick'); if (datePicker && datePicker.type !== 'date') { $('.date-pick').datepicker(); } } $(document).ready(function($) { displayDatePickerIfBrowserDoesNotSupportDateType(); });

---

我遇到了这个问题，因为我在 iOS（移动 Safari）中的 <input id="dateId" type="date"> 给出了错误的字符串格式。它与 Chrome 浏览器的格式不同：

Chrome: document.getElementById('dateId').value // "2022-04-22" Safari: document.getElementById('dateId').value // "22 abr. 2022"

我相信，正如先前的答案所述，输入正在回退到输入文本或其他内容。所以我用：

<input id="dateId" type="date" placeholder="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"> 

签出此MDN reference。

---