input的type="date"有何用？HTML原生日期选择器全解析

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 方案，把原生控件当可选优化项，而非基础依赖