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

Posted 2023-05-07

【中文标题】如何禁用 Microsoft Edge 中的日期选择器？

【英文标题】：How do you disable the datepicker in Microsoft Edge?

【发布时间】：2015-12-30 20:46:36

【问题描述】：

我有几个 type="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;   

【问题讨论】：

只是一个问题，你为什么同时使用type="date" 和jQuerys datepicker？ jQs datepicker 的目的不是替换type="date"吗？

好吧，我使用type="date" 以便系统日期选择器在移动设备上工作。我只在台式机和笔记本电脑上使用 jQuery 的 datepicker。

但是type="date" 有bas support (caniuse)，即使对于移动设备也是如此。我建议您对所有设备使用 jQ 的日期选择器。

是的，我正在使用 Modernizr 来检查浏览器是否支持输入 type="date"，如果不支持，它会恢复为 jQuery datepicker。

你能发布一个演示这个问题吗？

【参考方案1】：

不可能禁用 Edge (although Chrome can via a hack) 中的本机日期选择器控制功能，但无论如何。

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

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

你有几个选择：

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

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

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

邪恶选项：浏览器检测

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

【讨论】：

不幸的是，Edge 日期选择器无法正常工作。 Chrome 和 Firefox 有一些不错的日期选择器，但 Edge 实在是太糟糕了。遗憾的是，开发人员仍然不得不跳槽。对我们的用户说“不要使用 Edge，因为 Edge 根本不起作用”是行不通的。

Firefox 没有日期选择器。 @Rubix_Revenge

看起来确实如此。

【参考方案2】：

输入类型必须是文本而不是日期。这……

<input type="date" />

应该是

<input type="text" />

否则 Chrome 和 Edge 将添加一个日期选择器。而是使用类或 id 将其标识为 datepicker 并执行类似 $(".datepicker").datepicker();

的操作

【讨论】：

我不确定这个答案现在是否已过时，但我已经将“文本”作为输入类型，它仍然在我的 jQuery 日期/时间选择器顶部显示本机弹出窗口当我点击输入时。

【参考方案3】：

与 Cyptic 一样，我必须将类型更改为文本

<input type="text" class="datepicker"/>

然后在 JQuery 中

$("input.datepicker:text").datepicker(
    showOn: "both",
    dateFormat: "dd MM yy",
    changeMonth: true,
    changeYear: true
);

【参考方案4】：

如果你是伊朗人，你可以使用this page

并将类型更改为文本

<input type="text" id="datepicker"/>

在 jQuery 中

$("#datepicker").kamaDatepicker('BirthDate-ID');