HTML date输入类型如何实现日期选择功能？

本文共计783个文字，预计阅读时间需要4分钟。

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