文本框TextMode =“日期”时如何清除边缘浏览器中输入的日期？答案

【问题标题】：How to clear entered date in edge browser when textbox TextMode="Date"?文本框TextMode =“日期”时如何清除边缘浏览器中输入的日期？
【发布时间】：2020-02-17 18:21:13
【问题描述】：

在 ASPX 页面中，我有几个文本框应该只接受日期格式的值。我添加了 TextMode="Date" 属性来设置它，它按预期工作，就像在 Chrome 浏览器中输入和删除日期一样，但在 Microsoft Edge 浏览器中我无法删除输入的日期（Edge 浏览器在文本框中不显示“X”按钮像 Chrome）。

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

有没有一种简单的方法来解决（比如在文本框中添加“X”按钮）而不是客户日历？

边缘日期：

Chrome 中的日期：

【问题讨论】：

编辑为答案而不是评论。
chrome 中的“x”按钮将在某个时候被移除，因为 Microsoft 一直在与 Google 合作更新 chromium 表单控件。 blogs.windows.com/msedgedev/2019/10/15/…
@AustenHolland - 感谢您告诉我。现在有什么办法可以清除输入的日期？
首先想到的是在铬“x”现在所在的输入旁边或顶部添加您自己的“x 按钮”。然后使用 JavaScript 在点击时将输入值设置为空。请参阅下面@Frank Furter 的答案以获取此示例。

标签： javascript html css asp.net aspx-user-control

【解决方案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;
}

【讨论】：

正如@AustenHolland 所说，Chrome 和 Edge 之间的不一致应该在未来得到解决。
进一步 - 感谢您的回复。是否可以修改您的答案以支持 asp 文本框控件而不是输入（通用控件）
@Jaggi 我不熟悉 ASP 文本框是如何呈现的，所以我的示例基于 HTML 的输出。我已经在我的示例中更新了 CSS，但是改为使用 ID 为 txtSample 的元素。