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

Posted 2023-05-07

【中文标题】如何禁用新的 Chrome HTML5 日期输入？

【英文标题】：How can I disable the new Chrome HTML5 date input?

【发布时间】：2012-07-01 12:14:10

【问题描述】：

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

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

【问题讨论】：

我会删除 [type=date]。无论好坏，jQuery UI 插件都会为您提供更精细的控制。

确实如此，只是该插件在触控设备上几乎无法使用。保留类型的优势，除了在语义上是正确的，还可以利用触摸设备上的本地日期和时间选择器。

知道了，这是一个合法的用例。我会更新我的答案。

我相信当前版本的 Chrome 已经解决了这个问题。

【参考方案1】：

你有几个不同的选择。

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

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

User agent sniffing is a bad idea，但这会起作用。

我认为理想的方法是检测浏览器是否支持原生日期选择器，如果它使用它，如果不使用 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

【讨论】：

查看 Webshim 库，除其他外，它执行这种基于特性的 polyfill（它也使用 Modernizr 和 jQuery UI），但适用于所有输入类型，并且还实现了所有HTML5 表单 JS API（用于验证、可访问性等）

当 Chrome 升级到版本 30 时，这似乎会中断

@Bryan 为什么（有兴趣知道，因为我目前使用类似于上述的修复程序）

因为他正在检查字符串“Chrome/2”。一旦我们到达版本 30，该字符串将不再是 userAgent 的一部分。

这里有几个很好的答案：***.com/questions/11320615/…（@Jimbo 和 @pgn）

【参考方案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);

【参考方案3】：

移除箭头和旋转按钮：

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

您仍然可以通过按 Alt+向下箭头（在 Windows 10 上选中）来激活日历。

要禁用，您需要添加一点 javascript：

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

【参考方案4】：

我完全同意 TJ。

如果您正在对日期值进行任何类型的编辑、预填充或动态设置，您还需要知道截至 2013 年 7 月 3 日Chrome only honors the ISO standard date format (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 答案的第一个选项中，您就可以在 Chrome 中使用 jQuery 的日期选择器而不会出错！

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