Datepicker 在 Safari 和 FireFox 中不起作用答案

【问题标题】：Datepicker not working in safari and FireFoxDatepicker 在 Safari 和 FireFox 中不起作用
【发布时间】：2017-01-17 22:58:18
【问题描述】：

我正在尝试使用 HTML5 中的默认日期类型，但 Safari 和 FireFox 不完全支持，我使用 jQuery 的解决方法也不起作用。

我有这个在script.js

$(document).ready(function(){
    if ( $('#date1').type != 'date' ) $('#date1').datepicker();
});

在表格中，我有这个：

<script src="js/script.js" type="text/javascript"></script>
<input id="date1" name="date1" required="required" type="date" value="MM/DD/YY"/>

当我在 Safari/Firefox 中加载页面时，我没有看到任何错误，我还检查了元素，没有错误。

我做错了什么？

【问题讨论】：

【解决方案1】：

JQuery 有一个 .type 函数，但是在您的示例中没有正确使用它，也没有相关性。我相信你想要的是元素的typeproperty，可以这样实现：

$(document).ready(function(){
    if ( $('#date1').prop('type') != 'date' ) $('#date1').datepicker();
});

这是一个比较 .type 和 .prop('type') 的 JSFiddle：https://jsfiddle.net/hczg6uyf/1/

这是您的固定代码的 JSFiddle，由 Tom 在下面的 cmets 中提供：https://jsfiddle.net/51wLrxy0/1/

【讨论】：

【解决方案2】：

好吧，在阅读了 Safari 和 IE 不支持此功能后，我找到了一个令我满意的解决方法。

我的问题是在 Safari 上我什至无法点击输入字段。所以用户甚至不能手动添加日期，如果可以的话，没有占位符文本告诉他这是一个日期输入字段。

我的苏洛蒂安：

添加一个占位符，chrome 会忽略这个。然后还要在输入中添加min-height，然后在 Safari 上我至少可以看到它的日期输入字段，并且用户可以手动添加日期。

代码：

<input placeholder="Date" id="datetimepicker" type="date" name="calender" class="form-control" />

CSS：

input#datetimepicker {
   min-height: 1px;   
}

对于不支持type="date" 的浏览器，这只是一个对我有用的快速技巧。

【讨论】：