HTML5日期输入类型与jQuery日期选择器冲突

Question

我在我的网站上使用jQuery UI的日期选择器以进行日期选择。我的一个用户刚刚升级到具有HTML5本地日期选择器的最新版本的Chrome。重要问题是这两个UI重叠在一起。另外一个问题是当用户提交日期时，数据库中的日期会恢复为"0000-00-00"并生成错误数据。

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

- Neon

Answer 1

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

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

- jmoerdyk

---

以上代码应该放在哪里？另外，我需要在头部调用modernizr.js脚本吗？ - Neon

是的，您需要在头部使用脚本标签引用moderizr.js。并且您应该将上述代码放置在当前调用.datepicker()方法的位置。发布您现有的代码会有所帮助。 - jmoerdyk

这个解决方案对我很有效！以下是安装Modernizr的说明：http://modernizr.com/docs/#installing - Luke

此外，如果您在使用自定义的Modernizr构建时遇到依赖错误（例如此处 - https://github.com/Modernizr/Modernizr/issues/849），请进行谷歌搜索以查看需要包含在构建中的其他选择。他们说这个问题应该在v3中得到解决。 - Luke

Answer 2

要么从使用input[type=date]切换到input[type=text]，要么使用Modernizr检测本地日期选择器的支持。我在这里写了一篇关于两个选项影响的文章 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/。

- TJ VanToll

Answer 3

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

我曾经在使用Genemu jQuery Datepicker时遇到了这个问题，我通过添加一个日历图片按钮和一点css代码来解决这个问题。 您可以在此链接中查看最终结果 在这里，您可以阅读有关添加图像图标的文档：jQuery UI Datepicker 然后，我简单地添加了这样的CSS（也许对您来说样式规则会有所不同）：

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

- edrian

Answer 4

在你的表单中添加novalidate属性以移除浏览器内置的验证。

<form action="login.htm" novalidate>

请查看此链接以获取更多信息。

- MaxZoom