input type="date"的核心作用是唤起系统级日期选择器并提交标准yyyy-mm-dd格式字符串，但需严格遵循规范：value必须用dom属性赋值、min/max须同格式、需手动校验输入、注意时区陷阱及浏览器兼容性。
input type="date" 的核心作用是：让浏览器原生唤起日期选择控件，无需 JS 库就能提供系统级日历或滚动器，提交值严格为 YYYY-MM-DD 字符串。但它不是“开箱即用”的完美方案，而是个有明确边界、必须按规范操作的原生控件。
为什么 value 必须是 YYYY-MM-DD，且不能靠 setAttribute 赋值
浏览器只认 value 属性的 DOM 值，不是 HTML 属性。写 <input type="date" value="2024/05/10"> 或用 setAttribute('value', '2024/05/10') 都会失效——输入框显示为空或报验证失败。
- 正确做法：直接赋值
input.value = '2024-05-10' - 从后端取日期时，先标准化：
new Date(dateStr).toISOString().split('T')[0] - 空值初始化别写
value=""，留空即可；否则某些浏览器会触发required校验失败
min/max 有效但不阻止手动输入非法值
min 和 max 只限制日历面板可选范围，用户仍可手动输入（比如粘贴）超限日期，如 "1919-01-01"，此时 input.checkValidity() 会返回 false，但不会自动拦截。
- 必须配合
input或change事件做运行时校验 - 推荐监听
input事件，实时检查event.target.value是否符合正则/^\d{4}-\d{2}-\d{2}$/且在范围内 -
min/max值也必须是YYYY-MM-DD格式，例如min="1920-01-01"
时区陷阱：new Date(input.value) 会多/少一天
input[type="date"].value 是纯日期字符串，无时区信息。但 new Date('2024-06-12') 在 JS 中会被解释为 UTC 零点，再转成本地时间——比如你在东八区，结果就是 2024-06-12T16:00:00.000Z，显示成 Mon Jun 12 2024 00:00:00 GMT+0800，看似对，实则已偏移。
- 要真正获取用户本地“当天零点”，得用：
const d = new Date(input.value); d.setHours(0,0,0,0) - 若需转为时间戳用于后端，别直接
+new Date(input.value)，应构造本地午夜：new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime() - 服务端永远按
YYYY-MM-DD解析，别假设它带时区
iOS Safari 和 Firefox 的降级行为最容易被忽略
iOS 15.4 之前存在时区解析 bug，提交值可能错位一天；Firefox 目前仍不支持 type="date"，直接渲染为普通文本框，且不触发任何验证逻辑。
- 不要依赖 CSS 伪元素（如
::-webkit-calendar-picker-indicator）定制样式——iOS Safari 完全不响应 - 必须做功能检测：
'valueAsDate' in document.createElement('input')，不通过就 fallback 到type="text"+ JS 日期库 - 如果业务强依赖日期格式一致性（比如金融、医疗），建议默认走 JS 方案，把原生控件当可选优化项，而非基础依赖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
