正确重置html date输入框需设value为空字符串并清除校验状态：input.value = ""; input.setcustomvalidity(""); 同时手动触发change事件；若在vue/react中，还需同步更新组件数据状态。
HTML <input type="date"> 重置为空值的正确写法
直接赋空字符串 input.value = "" 在部分浏览器（尤其是 Chrome 120+）会失效，显示为当前日期或上一次有效值。真正可靠的方式是赋一个无效日期字符串，比如 "Invalid Date" 不起作用，而必须用空字符串配合 setCustomValidity("") 清除校验状态，但更根本的是：**只有将 value 设为符合 ISO 格式的空值（即空字符串），且该 input 没有 required 属性或已通过校验，才能视觉清空**。
实操建议：
- 先确保 input 没有
required，或手动调用input.setCustomValidity("")再赋值 - 统一使用
input.value = ""（不是null或undefined） - 如果 input 已绑定
change或input事件，重置后需手动触发dispatchEvent(new Event("change", { bubbles: true }))，否则 Vue/React 等框架监听不到变化
表单整体重置时 type="date" 不恢复默认值的原因
<form></form> 的 reset() 方法本应把所有控件还原为初始 value，但对 date 输入框，它只还原到 HTML 中写的 value 属性值——而这个值若没写，就是空；若写了（如 value="2024-01-01"），就会固执地回到那天，哪怕你 JS 改过多次。很多人误以为“没设 value 就等于无默认”，其实浏览器内部仍视其初始值为 ""，但 UI 表现可能因时区、系统 locale 显示为今天。
常见错误现象：
- HTML 中没写
value，但form.reset()后显示今天日期 → 实际是浏览器填充了当前日期作为 fallback，不是“重置”出来的 - 写了
value="2023-12-25"，之后 JS 改成 "2024-06-01"，再reset()一定回到 12 月 25 日 - 在 Safari 中，
reset()可能完全不触发input事件，导致依赖它的逻辑卡住
兼容性最强的手动重置函数（含时区安全处理）
不要依赖 new Date().toISOString().split("T")[0] 来生成“今天”，因为用户本地时区可能比 UTC 早或晚，导致生成的日期比预期差一天。重置目标是“空”，不是“今天”。所以函数只需专注清空，不生成新值。
function clearDateInput(input) {
input.value = "";
input.setCustomValidity("");
input.dispatchEvent(new Event("change", { bubbles: true }));
}
如果要批量清理整个表单里的 date 输入框：
- 用
form.querySelectorAll('input[type="date"]')获取全部 - 避免用
form.reset()后再遍历清理——它可能已被浏览器干预，行为不一致 - 对每个 input 单独调用上述
clearDateInput，比依赖原生 reset 更可控
Vue / React 场景下为什么 value="" 仍不生效
框架接管了表单绑定，DOM 层的 value 被设为空，但组件 state 还是旧值，下次 re-render 会把 state 写回 DOM，覆盖你的清空操作。本质是单向数据流没断开。
对应解法：
- Vue：用
v-model时，重置必须同步改 data 中对应字段，例如this.formDate = ""；若用:value + @input，则只改 data 并确保触发 input 事件 - React：用受控组件时，必须更新 state（如
setDate("")），不能只操作 DOM - 绕过框架直操作 DOM（不推荐）：加
ref后调用ref.value = ""，但需配合forceUpdate或 nextTick，容易引发不一致
最易被忽略的一点：date 输入框的 value 始终是字符串，且必须是 YYYY-MM-DD 格式；传入 "2024/06/01" 或 "2024-6-1" 都会被浏览器忽略，表现为清空失败或回退到上一个有效值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
