html - HTML5 日期输入类型干扰 jQuery Datepicker

Question

我在我的网站上使用 jQuery UI 的 datepicker 进行日期选择。我的一位用户刚刚升级到最新版本的 Chrome，它具有内置的 HTML5 原生日期选择器。两个 UI 相互重叠的大问题。另一个问题是当用户提交日期时，数据库中的日期恢复为“0000-00-00”并产生错误数据。

如果我删除 jQuery 日期选择器，大多数不使用最新最好的浏览器的用户将没有弹出日期选择器。而且，那些拥有最新浏览器的人将有两个重叠的日历，这会破坏应用程序。我的问题是如何禁用最新的浏览器显示内置日期功能并继续使用 jQuery Datepicker？

score 39 · Accepted Answer

使用Modernizr或类似的库来检测浏览器是否支持input type=date，如果不支持则加载 jQuery UI 日期选择器。

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').datepicker();
}

score 1 · Accepted Answer

从使用切换input[type=date]到input[type=text]或使用 Modernizr 来检测对本机日期选择器的支持。我在这里写了一篇关于这两个选项的含义的帖子 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/ .

score 0 · Accepted Answer

有时您无法修改表单类型。例如，我使用 Symfony2 Bundle 的 FormType。

我使用 Genemu jQuery Datepicker 遇到了这个问题，我通过添加日历图像按钮和少量 css 代码解决了这个问题。

在这里您可以阅读添加图像图标的文档：jQuery UI Datepicker

然后，我简单地添加了一个这样的 css（也许样式规则对你来说会有所不同）：

form input[type=date] + img {
    position: relative;
    left: -25px;
}

score 0 · Accepted Answer

向表单添加novalidate属性以删除浏览器的内置验证。

<form action="login.htm" novalidate>

有关更多信息，请参阅此链接。

4 回答 4