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

Question

Microsoft Edge显示HTML5日期选择器以输入由其定义的输入的值

<input type="date">

有没有办法显示一个清除按钮或'x'装饰来删除之后的值,就像谷歌浏览器一样？

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 = "";
    });

}());

我希望这有帮助.

小提琴:http://jsfiddle.net/zcay9qc5/