如何禁用新的Chrome HTML5日期输入？

Question

Chrome的最近更新(V 20.x)使用​​新的内置日期和时间输入类型打破了我的一个表单.我在日期字段上调用jQuery UI datepicker,它曾经在更新之前完美地工作.更新后,Chrome会覆盖我的占位符并使jQuery UI窗口小部件无法使用.

有关如何阻止Chrome搞砸我的输入字段而不改变其类型的任何想法？

Answer 1

你有几个不同的选择.

您可以通过嗅探用户代理字符串并阻止点击事件来检测用户是否正在使用Chrome.

if (navigator.userAgent.indexOf('Chrome') != -1) {
    $('input[type=date]').on('click', function(event) {
        event.preventDefault();
    });
}

用户代理嗅探是一个坏主意,但这将有效.

在我看来,理想的方法是检测浏览器是否支持本机日期选择器,如果它确实使用它,如果不使用jQuery UI.

if (!Modernizr.inputtypes['date']) {
    $('input[type=date]').datepicker({
        // Consistent format with the HTML5 picker
        dateFormat: 'yy-mm-dd'
    });   
}?

示例 - http://jsfiddle.net/tj_vantoll/8Wn34/

当然,由于Chrome支持本机日期选择器,用户会看到而不是jQuery UI.但至少你不会有功能冲突,UI可用于最终用户.

这引起了我的兴趣所以我写了一些关于使用jQuery UI的datepicker和本机控件的内容 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to- jquery-ui /.

编辑

如果您有兴趣,我最近就使用jQuery UI的小部件和HTML5表单控件进行了讨论.

• 幻灯片
• 视频