HTML5 <input type="date"> 无原生清空按钮，需用自定义按钮设 value="" 并派发 input 和 change 事件；React/Vue 中还需同步更新状态，否则绑定逻辑无法感知清空。
HTML5 <input type="date"> 本身不提供清空按钮
浏览器原生的 <input type="date"> 没有内置清空按钮（不像某些移动端或自定义组件），用户只能手动删除输入框内容或用退格键清空，且在部分浏览器（如 Chrome）中，即使清空了，value 可能仍为上次选中的日期字符串，或变成空字符串但 UI 不刷新。这不是 bug，是规范行为：空值合法，但无视觉反馈。
用 type="date" + 自定义清空按钮最可靠
推荐在 input 右侧加一个显式按钮，点击时将 input 的 value 设为空字符串，并触发 input 和 change 事件，确保绑定的 JS 逻辑（如表单验证、React/Vue 响应式更新）能正确响应。
- 按钮需用
<button type="button">，避免触发表单提交 - 清空后调用
inputEl.dispatchEvent(new Event('input', { bubbles: true }))和change事件，覆盖多数框架监听场景 - 样式上建议用绝对定位贴右，宽度固定（如 24px），图标用简写
✕或 SVG，避免依赖字体图标加载失败 - 兼容性无问题：所有支持
type="date"的浏览器都支持value = ""和事件派发
<div class="date-input-wrapper">
<input type="date" id="myDate">
<button type="button" onclick="document.getElementById('myDate').value=''; document.getElementById('myDate').dispatchEvent(new Event('input', {bubbles:true}));">✕</button>
</div>
React/Vue 中不要只靠 value 受控，要同步 onChange
在 React 中若用受控组件（value={date} + onChange），仅设 input.value = '' 不会触发 onChange，状态不会更新。必须同时更新 state：
- React：清空按钮的
onClick应调用setDate('')，而非直接操作 DOM - Vue 2/3：用
v-model时，清空按钮应赋值date = ''；若用:value+@input，需手动触发 input 事件并更新绑定变量 - 注意：空字符串
''是合法的dateinput 值，但null或undefined会被忽略，浏览器会保留旧值
移动端 Safari 等浏览器清空后可能残留 placeholder 或 UI 滞后
iOS Safari 对 type="date" 的渲染较特殊：清空 value 后，日期选择器弹出时仍可能默认回到上次日期，且输入框文字可能短暂显示灰色“—”或空白占位符。这不是 bug，是其 UI 层缓存行为。
立即学习“前端免费学习笔记（深入）”；
- 无法通过 CSS 伪类（如
::placeholder）控制 date input 的占位提示 - 若需强一致性，可临时切换
type：先设为text清空再切回date，但会丢失原生日期面板体验，不推荐 - 更稳妥的做法是：清空后主动调用
inputEl.blur()+inputEl.focus()，强制重绘输入框（部分机型有效）
