11

我有几个 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;   
}
4

4 回答 4

2

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

<input type="date" />

应该

<input type="text" />

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

于 2017-07-07T12:34:05.387 回答
2

无法禁用 Edge 中的本机日期选择器控制功能（尽管 Chrome 可以通过黑客攻击）——但无论如何。

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

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

你有几个选择：

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

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

JS 代码的开销也更少。

邪恶选项：浏览器检测

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

于 2015-11-17T07:33:49.877 回答
1

如果你是伊朗人，你可以使用这个这个页面

并将类型更改为文本

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

在 jQuery 中

$("#datepicker").kamaDatepicker('BirthDate-ID');
于 2020-06-17T18:03:40.237 回答
1

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

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

然后在 JQuery 中

$("input.datepicker:text").datepicker({
    showOn: "both",
    dateFormat: "dd MM yy",
    changeMonth: true,
    changeYear: true
});
于 2018-02-15T09:08:44.627 回答