Clear value of input type date in Microsoft Edge

Question

Microsoft Edge displays a HTML5 date picker to enter values for inputs defined by

<input type="date">

Is there a way to show a clear button or an 'x' decoration to delete the value afterwards, like it is done by Google Chrome?

Answer 1

The best option here is probably to hide the custom clear mark provided by Chrome, and provide your own for all browsers to use instead:

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

You would then provide your own clear button:

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

And finally, a small piece of logic to clear the input whenever the button is clicked:

(function () {

    "use strict";

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

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

}());

I hope this helps.

Fiddle: http://jsfiddle.net/zcay9qc5/