Jquery ui 如何禁用新的Chrome HTML5日期输入？_Jquery Ui_Google Chrome_Date_Input_Datepicker

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

jquery-ui google-chrome date input

Jquery ui 如何禁用新的Chrome HTML5日期输入？,jquery-ui,google-chrome,date,input,datepicker,Jquery Ui,Google Chrome,Date,Input,Datepicker,Chrome的最新更新（v20.x）用新的内置日期和时间输入类型打破了我的一个表单。我在一个日期字段上调用jQueryUIDatePicker，它在更新之前工作得非常好。更新后，Chrome会覆盖我的占位符，并使jQueryUI小部件无法使用你知道如何防止Chrome在不改变输入字段类型的情况下弄乱输入字段吗？你有几种不同的选择您可以通过嗅探用户代理字符串并防止单击事件来检测用户正在使用Chrome if (navigator.userAgent.indexOf('Chrome') != -

Chrome的最新更新（v20.x）用新的内置日期和时间输入类型打破了我的一个表单。我在一个日期字段上调用jQueryUIDatePicker，它在更新之前工作得非常好。更新后，Chrome会覆盖我的占位符，并使jQueryUI小部件无法使用

你知道如何防止Chrome在不改变输入字段类型的情况下弄乱输入字段吗？

你有几种不同的选择

您可以通过嗅探用户代理字符串并防止单击事件来检测用户正在使用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'
    });   
}

示例-

当然，由于Chrome支持原生日期选择器，用户会看到它而不是jQuery UI。但至少你不会有一个功能冲突，用户界面将可供最终用户使用

这引起了我的兴趣，所以我写了一些关于使用jQueryUI的日期选择器和本机控件-

编辑如果您感兴趣，我最近做了一个关于使用jQueryUI的小部件和HTML5表单控件的演讲

if (navigator.userAgent.indexOf('Chrome/2') != -1) {
    $('input[type=date]').each(function(){
        var d = trim(this.getAttribute('value'));
        if (d){
            d = new Date(d);
            var dStr = d.toISOString().split('T')[0];
            this.value = dStr; 
        }
    });
}

$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});

;
(function ($) {
    $(document).ready(function (event) {
        $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
            var $this = $(this);
            $this.prop('type', 'text').datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy-mm-dd',
                showWeek: true,
                firstDay: 1
            });

            setTimeout(function() {
                $this.datepicker('show');
            }, 1);
        });
    });
})(jQuery, jQuery.ui);

.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);