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

我有几个输入type =“date”，并且想要禁用Microsoft Edge中的默认日期选择器，因为我使用的是jQuery的datepicker。如何使用CSS或JavaScript禁用此功能？它在Chrome和Firefox中运行良好，但不是Edge。任何答案将不胜感激。如何禁用Microsoft 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">

$(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; 
}

来源

2015-10-02 Daniel Harris

只是一个问题，为什么你同时使用'type =“date”'和jQuerys datepicker？是不是用jQs datepicker替换'type =“date”'？ – Vucko

那么，我使用'type =“date”'，以便系统日期选择器在移动设备上工作。我只使用jQuery的datepicker作为桌面和笔记本电脑。 –

但是'type =“date”'[bas support]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input）（[caniuse]（http：// caniuse。 com /＃feat = input-datetime）），即使是移动设备。我建议你为所有设备使用jQ的日期选择器。 – Vucko

这是不可能禁用本地日期选择器控制功能在边缘（although Chrome can via a hack） - 但无论如何。

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

除了像边框，填充和字体样式这样的基本样式以及HTML标准属性（例如， placeholder。

你有两个选择：

保留默认的日期选择控件作为-是

这是我会推荐的选项。坚持使用默认的系统控制（在适用的情况下+造型）通常是最好的策略。这确保了最大的设备兼容性，并为您的用户提供了熟悉。另外，一切正常'正常工作'。

你的JS代码的开销也较少。

邪恶选项：浏览器检测

您可以检测，如果浏览器是边缘的JS代码，然后告诉它呈现了jQuery控制来代替。除非您真的需要，否则应该避免这种情况，因为浏览器检测变得过时并且很快就会出现维护噩梦。

来源

2015-11-17 07:33:49

不幸的是，边缘日期选择器不起作用。 Chrome和Firefox有一些体面的日期选择器，但Edge只是非常糟糕。这是一个耻辱，开发者仍然需要跳过篮球。对我们的用户说“只是不要使用边缘，因为边缘不起作用”不起作用。 –

Firefox没有日期选择器。 @Rubix_Revenge – Sebas

它看起来像它。 –

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

<input type="date" />

应该

<input type="text" />

否则Chrome和边缘将添加一个日期选择器。而是使用一类或ID来识别它作为日期选择器，并完成类似$(".datepicker").datepicker();

来源

2017-07-07 12:34:05

与Cyptic我不得不改变类型为文本

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

然后在JQuery的

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

来源

2018-02-15 09:08:44 arame3333

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

回答

相关问题