HTML <input type="date"> 无法用空字符串清空，因规范要求 value 必须为 YYYY-MM-DD 格式；真正有效方式是设 value = null，可跨浏览器清空并显示 placeholder。
HTML <input type="date"> 无法用空字符串清空？
直接给 value 赋空字符串（input.value = ""）在大多数浏览器里确实无效——输入框看起来没变化，且后续调用 checkValidity() 可能仍返回 true。这是因为规范要求 type="date" 的 value 必须是 YYYY-MM-DD 格式，空字符串不被识别为合法重置值。
真正有效的清空方式：设为 null 或非法日期字符串
浏览器对重置的“宽容”行为只发生在特定值上：
-
input.value = null—— 最推荐，语义清晰，兼容性好（Chrome/Firefox/Safari/Edge 均支持） -
input.value = "invalid"或任意非日期格式字符串（如" "、"x"）—— 触发浏览器内部重置逻辑，但属 hack，不建议长期依赖 - 避免
input.value = undefined：部分旧版 Safari 可能忽略
示例：
const dateInput = document.querySelector('input[type="date"]');
dateInput.value = null; // ✅ 真正清空，显示 placeholder（如“选择日期”）
表单重置按钮（<button type="reset">）为什么有时不生效？
它只重置「初始加载时的 value 值」，不是当前用户输入值。如果页面加载后你用 JS 动态设置了 value，reset 按钮会把输入框恢复成那个 JS 设置的值，而不是清空。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：重置前先确保初始
value为空 —— 即 HTML 中不要写value="2024-01-01"，也不要 JS 在 DOM ready 后主动赋值 - 若必须动态初始化，可在 reset 前手动干预：
form.addEventListener("reset", e => { setTimeout(() => dateInput.value = null); });
Vue/React 等框架中绑定后清空失败？注意受控组件陷阱
在受控组件里，仅改 DOM 的 value 不会触发视图更新；反之，只改状态（如 useState）而没同步到 DOM，也会看起来“没清空”。
- React：必须同时更新 state 和 ref（或确保 input 的
value属性与 state 严格一致），清空时设 state 为null或""（但后者仍需配合value={date || null}才可靠） - Vue 2/3：使用
v-model时，设绑定变量为null即可，框架会自动同步到 DOM 的value属性 - 关键点：不要混用受控与非受控 —— 比如一边用
v-model，一边又用ref.value = null直接操作 DOM
最易被忽略的是：服务端渲染（SSR）或 hydrate 场景下，初始 value 属性可能被硬编码进 HTML，导致客户端 JS 清空后又被 hydration “回填”。此时需确保服务端不输出 value 属性，或首次挂载后立即重置。
