Chrome中如何清除<input type="date">输入框的已选日期？

确实，Chrome默认的日期输入框在选中日期后，没有明显的清除选项，这挺让人头疼的。下面给你几个实用的解决方案：

方法1：通过CSS显示Chrome原生的清除按钮 #

Chrome其实自带了清除按钮，只是默认被隐藏了。你可以用CSS强制显示它：

input[type="date"]::-webkit-clear-button {
    display: inline-block;
    margin-right: 2px;
}

这样用户点击这个按钮就能直接清空日期，体验最原生，无需额外JS。

方法2：添加自定义清除按钮 #

如果想更灵活控制样式，可以在输入框旁边加一个自定义清除按钮，用JS实现清空逻辑：

<div style="display: flex; gap: 8px;">
    <input type="date" id="dateInput">
    <button onclick="clearDate()">清除</button>
</div>

<script>
function clearDate() {
    document.getElementById('dateInput').value = '';
}
</script>

你还可以给按钮加样式，比如做成小叉号图标，让它更贴合你的UI设计。

方法3：监听键盘快捷键（比如Esc键） #

给输入框添加键盘事件监听，用户按下Esc键时自动清空日期，提升操作效率：

const dateInput = document.getElementById('dateInput');
dateInput.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        dateInput.value = '';
    }
});

这个方法适合习惯用键盘操作的用户，作为补充体验很不错。

方法4：利用placeholder提示用户清空方式 #

如果不想改样式或加按钮，可以在输入框里加placeholder提示用户如何清空，比如：

<input type="date" placeholder="选择日期，按Esc清空">

不过这个只是提示，需要用户知道快捷键，体验不如前几种直接。

内容的提问来源于stack exchange，提问作者Johann