如何在Microsoft Edge中禁用日期选择器？

Question

我有几个输入type ="date",并且想要禁用Microsoft Edge中的默认日期选择器,因为我使用的是jQuery的datepicker.如何使用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 中的本机日期选择器控制功能（尽管 Chrome 可以通过 hack 实现）。

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

除了边框、填充和字体样式等基本样式以及 HTML 标准属性（例如placeholder.

您有几个选择：

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

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

JS 代码的开销也更少。

邪恶选项：浏览器检测

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