清空 的值不能直接设 value="",应使用 element.valueAsDate = null 最可靠;旧版 Safari 兼容需额外处理。

点击按钮时清空 <input type="date"> 的值
直接给 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 输入框是否生效
会生效,但有前提:该 <input type="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 输入框的典型坑
模板里写 <input v-model="dateValue" type="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 可能仍显示上次值



















