jquery-ui – 如何禁用新的Chrome HTML5日期输入?

前端之家收集整理的这篇文章主要介绍了jquery-ui – 如何禁用新的Chrome HTML5日期输入?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Chrome的最近更新(V 20.x)已使用新的内置日期和时间输入类型破坏了我的一个表单。我在一个日期字段调用jQuery UI datepicker,它在更新之前用来完美地工作。更新后,Chrome覆盖我的占位符,并呈现jQuery UI窗口小部件不可用。

任何想法,如何我可以防止Chrome搞砸我的输入字段,而不改变他们的类型?

解决方法

你有几个不同的选项。

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

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

User agent sniffing is a bad idea,但这将工作。

在我心目中的理想方法是检测浏览器是否支持本机datepicker,如果它使用它,如果不使用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的日期控件和本机控件 – http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/

编辑

如果你有兴趣,我最近谈了使用jQuery UI的小部件和HTML5表单控件。

> Slides
> Video

猜你在找的jQuery相关文章