html - 清除 Microsoft Edge 中输入类型日期的值

Question

Microsoft Edge 显示一个 HTML5 日期选择器来为定义的输入输入值

<input type="date">

有没有办法显示清除按钮或“x”装饰以在之后删除值，就像 Google Chrome 所做的那样？

Answer 1

这里最好的选择可能是隐藏 Chrome 提供的自定义清除标记，并提供您自己的清除标记以供所有浏览器使用:

input::-webkit-clear-button {
    display: none;
}

然后您将提供自己的清除按钮:

<input type="date" required />
<button>Clear</button>

最后，在单击按钮时清除输入的一小段逻辑:

(function () {

    "use strict";

    var elmnt = document.querySelector( "input" );
    var clear = document.querySelector( "button" );

    clear.addEventListener( "click", function ( event ) {
        elmnt.value = "";
    });

}());

希望对您有所帮助。

fiddle :http://jsfiddle.net/zcay9qc5/