原生<input type="date">不提供清除按钮，是浏览器标准行为；需通过<div>包裹输入框与<button>模拟，配合JS清空value并派发input事件，且注意iOS Safari的点击区域与渲染残留问题。
为什么 <input type="date"> 没有清除按钮
原生 <input type="date"> 不提供清除功能——这是浏览器标准行为，不是 bug。Chrome、Edge、Safari 都不支持点击后清空值，value 一旦设置，只能手动删或用 JS 干预。用户点开日历选完日期，就卡住了，没法一键回到“未选择”状态。
用 CSS + JS 模拟清除按钮的最小可行方案
不能改原生控件内部结构，但可以在其右侧叠加一个按钮，视觉上“长在一起”。关键点是：按钮必须可聚焦、可键盘操作（Enter/Space），且不遮挡原生日期弹出逻辑。
- 用
<div class="date-input-wrapper">包裹<input type="date">和清除按钮 - 清除按钮用
<button type="button">，避免表单提交干扰 - CSS 设置
position: relative在 wrapper 上，按钮position: absolute右对齐，right: 2px，top: 50%+transform: translateY(-50%) - JS 绑定点击和键盘事件：
button.addEventListener('click', () => input.value = '')，同时监听keydown判断event.key === 'Enter' || event.key === ' '
input.value = '' 后日期输入框显示异常怎么办
清空后，Chrome 和 Edge 会显示灰色占位文字（如 “—” 或空白），但 Safari 仍显示上次日期（视觉残留）。这不是 bug，而是 Safari 对空 value 的渲染策略不同。解决方法只有一个：
- 确保清空后调用
input.dispatchEvent(new Event('input', { bubbles: true }))，触发监听器更新 UI 状态 - 如果用了框架（如 React），需同步更新受控组件的 state，否则视图不响应
- 不要依赖
change事件——它只在用户确认选择后触发；清空操作必须用input事件通知外部逻辑
移动端 Safari 的特殊限制与绕过方式
iOS 16.4+ 开始，<input type="date"> 在 Safari 中无法通过 JS 触发弹出日历（input.click() 无效），且清除按钮若覆盖太严，可能拦截原生唤起手势。实际能做的只有：
立即学习“前端免费学习笔记（深入）”；
- 清除按钮尺寸控制在
24px × 24px以内，留出右侧 8px 安全边距供手指点按原生区域 - 用
appearance: none+ 自定义箭头图标替代默认下拉符号，避免和清除按钮视觉冲突 - 不监听
focus自动唤起——Safari 禁止非用户手势触发，强行调用会静默失败
真正的清除体验，在 iOS 上依然受限于系统控件，能做到的只是让“清空”动作可靠，而非完全模拟桌面端交互。
