input type="date" 原生支持但兼容性差：Safari旧版和IE不支持，iOS 15.4前有时区bug；值为YYYY-MM-DD格式，无placeholder，提交时转UTC零点易致后端误判一天；UI不可定制，reset行为各浏览器不一致。
HTML input date 的基本用法和浏览器兼容性
input type="date" 是原生支持的日期选择器，不需要额外 js 就能唤起系统级日历控件。但它在 safari（旧版）和 ie 中完全不支持，在 ios 15.4 之前存在时区解析 bug，提交值永远是 utc 零点而非用户本地时间。
- 值格式固定为
YYYY-MM-DD，不带时间、不带时区，服务端必须按此解析 - 不支持 placeholder（设了也不显示），要用
value或 label 引导用户 - 默认无值时显示为空白，不是当前日期；如需默认今天，得手动写
value="2024-06-12"（注意：不能用 JS 动态塞，否则 Safari 可能清空）
<input type="date" name="birth_date" min="1920-01-01" max="2024-12-31">
为什么选中日期后 form 提交的值总比预期早一天？
这是最常被忽略的坑：所有主流浏览器（Chrome/Firefox/Edge）在提交 input type="date" 时，会把用户选的“本地日期”强行转成 UTC 零点再发出去。比如你在北京选了 2024-06-12，实际发的是 2024-06-11T16:00:00Z（即 UTC 时间），后端若直接当字符串切分或用 Date 构造，就可能误判为 6 月 11 日。
- 后端别用
new Date(inputValue)解析，它会按本地时区再转一次 - 推荐做法：直接按字符串截取年月日，或用
dayjs(value, 'YYYY-MM-DD')这类严格模式解析器 - 若必须用 JS 处理，可用
input.valueAsDate获取本地 Date 对象（但注意 Safari 15.4+ 才稳定支持）
怎么让 date 输入框支持“年份滚动”或“中文星期”？
原生 input type="date" 不提供任何 UI 定制能力。所谓“年份滚动”“中文星期”“禁用周末”等需求，浏览器原生不支持，强行加 CSS 也无效（各浏览器 shadow DOM 结构不同，且 Chrome 已禁用部分伪元素访问）。
- 想控制 UI，只能换方案：用
input type="text"+ 第三方库（如 flatpickr、Pikaday），或自己写日历弹层 - 如果只是想改语言，靠
lang属性（如<html lang="zh-CN">）能影响部分浏览器的日历文案，但不保证生效 - 注意：第三方库会增加 bundle 体积，且移动端触摸体验未必比原生好；权衡是否真需要定制
form.reset() 后 date 输入框不恢复初始值？
这是个隐藏很深的行为差异：form.reset() 在 Chrome 和 Firefox 中会把 input type="date" 清空（即使有 value 属性），而 Safari 会保留初始值。根本原因是 reset 行为依赖于表单控件的“default value”定义方式，而 date 类型的 default value 在各引擎中实现不一致。
- 解决办法：不要依赖
form.reset()，改用 JS 显式赋值 - 示例：
document.querySelector('input[type="date"]').value = '2024-01-01'; - 更稳妥的做法是监听 reset 事件，手动恢复所有 date 字段
日期控件看着简单，但跨浏览器行为、时区处理、reset 逻辑这三块最容易出问题，而且错误往往延迟暴露——前端看起来正常，后端存错一天，查起来费半天劲。
立即学习“前端免费学习笔记（深入）”；
