How to clear entered date in edge browser when textbox TextMode="Date"?

Question

In ASPX page I have few text boxes which should accept only values in date format. I added TextMode="Date" property to set this, It is working as expected like entering and removing date in Chrome browser but in Microsoft Edge browser I cannot remove the date entered(Edge browser doesn't show 'X' button inside text box like Chrome).

<asp:TextBox ID="txtSample" runat="server" TextMode="Date">

Is there a simple way to fix( like adding 'X' button inside text box) instead of customer calendars?

Date in Edge:

Date in Chrome:

Answer 1

There's no default clear button that Edge provides so a solution would be to create your own function to clear the value of the field.

function clearDate() {
    var input = document.getElementById("txtSample");
    input.value = "";
}

The output HTML would look something like this:

<input type="date" id="txtSample" placeholder="12-12-2017">
<button onclick="clearDate()">clear</button>

You would still have the Chrome UI however so you might want to remove the Chrome version entirely using:

#txtSample::-webkit-clear-button {
    display: none;
}