清空HTML日期输入框必须设value为空字符串：input.value = ""；设null、undefined或非法格式无效，且需注意表单reset行为、框架响应式及iOS旧版本兼容性问题。
直接设置 value 为空字符串即可
HTML 的 是受控组件，不能靠清空显示文字或聚焦后删来重置。必须通过 JavaScript 修改其 value 属性，且值必须是符合 YYYY-MM-DD 格式的字符串，空值只能设为 ""（空字符串），设 null 或 undefined 无效。
常见错误是写成 input.value = null 或 input.value = " "，这不会清空框，甚至可能触发校验失败或保留旧值。
-
input.value = ""—— 正确，会清空并使checkValidity()返回true -
input.value = "2024-01-01"—— 可赋值，但需确保格式合法（年份至少 4 位，月/日必须两位） -
input.value = "2024/01/01"—— 无效，浏览器忽略，value保持不变
用 reset() 方法时要注意表单上下文
如果日期输入框在 内，调用 form.reset() 会把它恢复为 initialValue（即 HTML 中写的 value 属性值，或空）。但若没写 value 属性，初始就是空，reset() 后也为空。
容易踩的坑：单独给日期 input 设置了 value="2024-01-01"，之后 JS 改成了空，再调用 form.reset() 会把它拉回 "2024-01-01"，而不是你期望的空。
- 想彻底“无初始值”，HTML 中不要写
value属性 - 想重置为某个固定日期，先
input.value = "2024-01-01"，再form.reset()没用，得手动赋值 -
form.reset()不触发input事件，如需响应清空动作，得监听reset事件并手动处理
Vue/React 等框架中别直接操作 DOM value
在 Vue 中用 v-model、React 中用 value + onChange 时，清空应走数据层：把绑定的变量设为 ""，而不是去改 input.value。否则视图和状态会不一致，后续输入可能失效或被覆盖。
例如 Vue：
<input type="date" v-model="selectedDate">
// 清空写法：
selectedDate = "" // ✅
// 而不是：
document.querySelector("input").value = "" // ❌ 破坏响应式
React 同理，必须更新 state，不能绕过 setState 直接改 DOM。
移动端 iOS Safari 有兼容性细节
iOS 15.4+ 已支持 input.value = "" 正常清空，但更早版本（尤其 iOS 14）存在 bug：设为空后，再次点击输入框，可能仍显示上次选中的日期（UI 没刷新，尽管 value 已是空）。临时缓解方式是加一次 blur() 再 focus()，或强制重绘：
-
input.value = ""; input.style.display = "none"; setTimeout(() => { input.style.display = ""; }, 1);（不推荐，副作用大） - 更稳妥的是：确保用户交互后才清空（比如按钮点击后），避免在
change回调里立刻清空又立刻聚焦 - 若需自动清空场景（如筛选条件重置），建议延后 1 帧：
requestAnimationFrame(() => { input.value = ""; })
这个细节常被忽略，只在真机上暴露，开发时容易误判为逻辑问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
