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

Question

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

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

在文档中,它表示支持Safari:但是,它目前仅显示文本字段(而Chrome和其他浏览器正确显示日期选择器).

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

Run Code Online (Sandbox Code Playgroud)

(同样适用于没有min属性)

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

谢谢!

Answer 1

小智 43

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

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

四年后，仍然不支持 input[type=date]。浏览器真是个笑话。Safari 确实是“新”IE。 (68认同)
5年后再做吧。 (25认同)
6年后做到这一点。 (14认同)
我所知道的唯一解决方法是在输入标签上提供一个 `placeholder="yyyy-mm-dd"` 属性，Safari / IE 应该使用该属性，但其他支持 html5 日期选择器的浏览器将忽略并使用操作系统的推荐格式（例如，对于美国用户，将是“mm/dd/yyyy”）。您选择的占位符格式应与您在服务器端处理字段数据的方式一致。 (6认同)
[caniuse](https://caniuse.com/input-datetime) 现在报告称，下一版本的 Safari 将部分支持日期类型输入。他们花了足够长的时间。 (3认同)
Safari 14.1+ 终于支持 `input[type="date"]`。 (2认同)

Answer 2

Fin*_*rcy 38

尽管 Safari（或 IE）没有原生日期选择器，但一个很好的解决方法是向placeholder日期输入添加一个属性。这会通知 Safari 和 IE 用户回退文本输入的格式（即yyyy-mm-dd）。

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

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

您能否具体说明“错误顺序”的含义。对我来说，根据占位符值“yyyy-mm-dd”，“1960-11-21”似乎是正确的。如果您想使用其他占位符模式，您可以自由编辑它（例如 dd-mm-yyyy 或 mm-dd-yyyy）。 (3认同)

Answer 3

tan*_*y_k 10

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

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

旧答案：

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

“使用Safari TP [TP =技术预览] 115，在2020年10月22日，用户界面为解除启动date，datetime-local并time支持在Mac OS和iOS。当月输入类型是在MacOS不支持，但在iOS上的作品。本周输入类型在 macOS 和 iOS 上不受支持。”

截图：

哇……终于！苹果还需要数年时间才能实现什么？之前有人评论过——Safari 是新的 IE。完全同意。 (2认同)

Answer 4

drj*_*nco 7

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

Run Code Online (Sandbox Code Playgroud)

这看起来是一个很好的解决方案，但它似乎不起作用。我将上述内容放在脚本标签之间的头部，并将“您的日期”更改为表单中日期输入字段的 id（和名称），但这在 safari 上没有区别 - 仍然只是一个空白文本框。控制台输出中没有任何内容 (3认同)

Answer 5

con*_*rcy 5

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

在 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，10 月前
查看次数：	36529 次
最近记录：	6 年，6 月前