javascript - 如何禁用 Microsoft Edge 中的日期选择器？

Question

我有几个类型为“date”的输入，并且想禁用 Microsoft Edge 中的默认日期选择器，因为我使用的是 jQuery 的日期选择器。如何使用 CSS 或 JavaScript 禁用此功能？它在 Chrome 和 Firefox 中运行良好，但在 Edge 中运行不正常。

工作JSFiddle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

<input type="date">

JS

$(document).ready(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();
    }
});

$(window).resize(function() {
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) {
        $('input[type=date]').datepicker();             
    }
    else {
        $('input[type=date]').datepicker("destroy");
    }
});

CSS

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator  {
    display: none;
    -webkit-appearance: none;   
}

Answer 1

无法禁用 Edge 中的 native 日期选择器控件功能 (although Chrome can via a hack) - 但无论如何。

输入控件，除非由浏览器设计，否则通常基于/是系统控件。这意味着输入日期选择器是输入日期选择器，select 下拉列表是 select 下拉列表。

除了边框、填充和字体样式等基本样式以及 HTML 标准属性(例如占位符。

你有几个选择:

保持默认的日期选择器控件不变

这是我推荐的选项。坚持使用默认系统控件(+ 适用的样式)通常是最好的策略。这确保了最大的设备兼容性和用户的熟悉度。另外，一切通常都“正常工作”。

您的 JS 代码中的开销也更少。

邪恶选项:浏览器检测

您可以在您的 JS 代码中检测浏览器是否为 Edge，然后告诉它呈现 jQuery 控件。除非你真的需要它，否则你应该避免这种情况，因为浏览器检测变得过时并且很快就会成为维护噩梦。