input type="date" 是只读格式输入框，用户只能点选原生日历，不可手动编辑；设值必须为严格 YYYY-MM-DD 格式且在 min/max 范围内，否则静默失败；推荐用 valueAsDate/valueAsNumber 安全读取，避免 new Date(value) 时区偏移。
input type="date" 不是“编辑控件”，它是个只读格式输入框——你不能在里面手动修改年月日数字，也不能用方向键微调。浏览器强制弹出原生日历面板，用户只能点选。这点和 input type="text" 或 input type="datetime-local" 有本质区别。
为什么 value 改了但界面上没变？
常见现象：JS 执行了 el.value = '2025-12-25'，但输入框仍显示空或旧值。原因有二：
- 赋值字符串格式错误，比如用了
'25/12/2025'或'2025/12/25'——input type="date"只认YYYY-MM-DD，其他全被忽略 - DOM 尚未挂载完成就赋值，例如在
document.createElement('input')后立刻设value，但元素还没插入文档，部分浏览器（尤其是 Safari）不触发渲染 - 设置了
min或max，而新值超出范围，浏览器静默丢弃（不报错、不提示）
怎么安全地设置和读取日期值？
别碰 new Date(el.value)，它会把字符串当 UTC 解析，本地时区一换就偏一天。正确方式：
- 设值：直接写
el.value = '2026-11-04'（确保格式合法且在 min/max 内） - 读值：
el.valueAsDate返回本地时区的Date对象（Chrome/Firefox/Safari ≥14.1 支持） - 读毫秒数：
el.valueAsNumber（同上兼容性），比new Date(el.value).getTime()更稳 - 需要 fallback 兼容 IE？用
el.value && new Date(el.value + 'T00:00')，但必须加校验防止Invalid Date
表格里批量生成时 name 和 value 容易出错
动态往表格每行插入 input type="date"，最常崩在三处：
-
name写成固定值如name="due_date"，提交后所有行只传最后一个值；应带索引，如name="items[0][due_date]" -
value直接填row.dueDate，但后端返回的是时间戳或2026-11-04T08:30:00Z，没截成YYYY-MM-DD就塞进去，结果清空 - 用
innerHTML += ''插入，整行重绘，丢失已绑定事件或已有用户选择 - 移动端 Safari 对 value 初始化极敏感——哪怕多一个空格（
' 2026-11-04'）都会导致控件显示 “Invalid Date”
真正难的不是怎么写出来，而是怎么让 value 始终对得上后端存的格式、不被浏览器悄悄吞掉、在 iOS 和 Android 上表现一致。这些细节不跑真机测一遍，光看文档根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
