Как очистить введенную дату в браузере ребра, когда текстовое поле TextMode = "Дата"?

Question

На странице ASPX у меня есть несколько текстовых полей, которые должны принимать только значения в формате даты. Я добавил свойство TextMode = "Date", чтобы установить это, оно работает как ожидалось, как ввод и удаление даты в браузере Chrome, но в браузере Microsoft Edge я не могу удалить введенную дату (браузер Edge не отображает кнопку «X» внутри текстового полякак Chrome).

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

Есть ли простой способ исправить (например, добавить кнопку 'X' внутри текстового поля) вместо календарей клиентов?

Дата в Edge:

Дата в Chrome:

Answer 1

Нет стандартной кнопки очистки, которую предоставляет Edge, поэтому решением было бы создать собственную функцию для очистки значения поля.

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

Выходной HTML-код будет выглядеть примерно так:

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

У вас все равно будет пользовательский интерфейс Chrome, поэтому вы можете полностью удалить версию Chrome, используя:

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