清空 的值不能直接设 value=""，应使用 element.valueAsDate = null 最可靠；旧版 Safari 兼容需额外处理。
点击按钮时清空
直接给 value 赋空字符串（""）无效，浏览器会忽略。必须赋值为 null 或一个非法日期字符串（如 "invalid"），但最可靠的是设为 "" 后再调用 inputElement.valueAsDate = null。
实操建议：
- 用原生 JS 时，优先使用
element.valueAsDate = null，它明确重置日期对象状态 - 如果兼容性要求覆盖旧版 Safari（element.value = "" +
element.dispatchEvent(new Event("input", { bubbles: true }))触发校验和绑定更新 - Vue/React 等框架中，不要只改 state，还要确保 DOM 元素的
value属性同步被清除（比如在nextTick或useEffect中手动操作 ref）
form.reset() 对 date 输入框是否生效
会生效，但有前提：该 必须有 value 属性（哪怕为空），且初始值在 HTML 中写死或通过 JS 设置过（即属于表单的“默认值”）。
常见错误现象：
- 页面加载后 JS 动态设置了
input.value = "2023-01-01"，但没同步设置input.defaultValue→form.reset()不会还原它 - HTML 中没写
value，仅靠 JS 赋值 → 表单认为该字段无默认值，reset()后仍为空，但不是“重置”，而是“保持初始空状态” - 某些 Chromium 版本在
form.reset()后不触发input事件，导致依赖它的校验逻辑失效
用 type="date" 时 reset 的兼容性陷阱
Android WebView 和部分旧版 iOS Safari 不支持 valueAsDate，直接访问会报 undefined is not an object 错误。
安全写法：
if ("valueAsDate" in input) {
input.valueAsDate = null;
} else {
input.value = "";
input.dispatchEvent(new Event("input", { bubbles: true }));
}
注意点：
- 别用
input.value = "0000-00-00"—— 这不是合法 ISO 日期，部分浏览器会静默转为空，部分会显示为乱码 - 服务端若接收空字符串
""，需主动判空并转为NULL或默认时间，不能依赖前端“清空即无值”
Vue 中重置 date 输入框的典型坑
模板里写 ，点击重置按钮执行 this.dateValue = ""，但输入框 UI 没变 —— 因为 Vue 对 type="date" 的 v-model 绑定依赖于 valueAsDate，而空字符串无法自动映射回 null。
解决方式：
- 重置时设为
null：this.dateValue = null（推荐，v-model 会正确同步） - 或在
@click里加 ref 手动操作：this.$refs.dateInput.valueAsDate = null - 避免用
new Date("")赋值，它会变成 Invalid Date，但 DOM 可能仍显示上次值
重置 date 输入框真正麻烦的不是“怎么写一行代码”，而是得同时照顾 DOM 状态、框架响应式、浏览器差异、表单默认值机制这四层。漏掉任意一层，都会出现“看着清了，其实没清”或者“清了但校验不触发”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
