35

Chrome 的最新更新 (V 20.x) 使用新的内置日期和时间输入类型破坏了我的一种表单。我在日期字段上调用 ​​jQuery UI datepicker，它在更新之前可以正常工作。更新后，Chrome 会覆盖我的占位符并使 jQuery UI 小部件无法使用。

关于如何防止 Chrome 在不更改其类型的情况下弄乱我的输入字段的任何想法？

4

4 回答 4

41

你有几个不同的选择。

您可以通过嗅探用户代理字符串并阻止点击事件来检测用户正在使用 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 的日期选择器的内容 - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to- jQuery-ui/。

编辑

如果您有兴趣，我最近发表了关于在 HTML5 表单控件旁边使用 jQuery UI 的小部件的演讲。

于 2012-06-30T02:25:19.340 回答
2

这对我有用：

;
(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);
于 2014-09-18T10:26:30.233 回答
2

要删除箭头和旋转按钮：

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

您仍然可以通过按Alt+激活日历Down Arrow（在 Windows 10 上选中）。

要禁用，您需要添加一些 JavaScript： 

dateInput.addEventListener('keydown', function(event) {
    if (event.keyIdentifier == "Down") {
        event.preventDefault()
    }
}, false);
于 2016-12-20T12:36:36.020 回答
0

我完全同意 TJ。

如果您正在对日期值进行任何类型的编辑、预填充或动态设置，您还需要知道自 2013 年 7 月 3 日起，Chrome 仅支持 ISO 标准日期格式（yyyy-mm-dd ) . 它将以本地格式（美国为“mm/dd/yy”）向用户显示日期，但会忽略 HTML 中设置的非 ISO 标准格式的任何值。

要在页面加载时进行转换，您可以使用 TJ 的用户代理嗅探器并执行以下操作：

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; 
        }
    });
}

例如，如果您选择禁用本机日期选择器并使用 jQuery，您还需要设置日期格式以匹配 Chrome 的日期字段，否则它不会显示 jQuery 日期选择器发送的输入：

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

将这两件事添加到 TJ 答案的第一个选项中，您就可以让 jQuery 的日期选择器在 Chrome 中正常工作！

依靠本机日期选择器是理想的最佳解决方案。但是，当您需要支持停电日期、日期范围的东西，或者您只是想让它看起来更漂亮时，这将起作用。

于 2013-07-02T22:47:16.703 回答