原生 input[type="date"] 在现代浏览器中可用，但需通过 el.type === 'date' && 'showPicker' in el 运行时检测；不支持时应隐藏原 input 并同级插入日历容器，保留语义与表单集成，手动同步 min/max、禁用日期，服务端严格校验格式与时区。
原生 input[type="date"] 在 Chrome/Edge（Chromium）、Firefox 104+、Safari 16.4+ 中可用，但 iOS 15.4 以下、旧版 Edge（EdgeHTML）、多数安卓 WebView 及微信内置浏览器中根本点不开——不是样式问题，是功能缺失。兼容方案必须基于运行时检测 + 有状态降级，不能靠 CSS 修复或 polyfill 补语法。
怎么判断浏览器真能用 input[type="date"]
别信 Modernizr.inputtypes.date 或 UA 字符串；它只检测属性存在，不反映可交互性。Safari 14 就会返回 true，但点击无响应。
- 正确检测方式：
const el = document.createElement('input'); el.type = 'date'; const isSupported = el.type === 'date' && 'showPicker' in el; -
showPicker是关键：Chrome 102+、Edge 102+、Safari 16.4+ 支持，旧版 Safari 和 Firefox 返回undefined - 对不支持的环境，不要改
el.type = 'text'后硬塞 JS 校验——那只是个文本框，没日期语义，无障碍和表单验证都失效
降级时为什么必须保留原生 input 元素
直接替换 DOM 节点（比如删掉 input[type="date"] 再插入 flatpickr 的容器）会导致 Vue/React 响应式绑定断裂、form.serialize() 丢失字段、label[for] 失效、屏幕阅读器无法识别日期语义。
- 正确做法：保留原
input，设style="position: absolute; opacity: 0; pointer-events: none;"隐藏但不销毁 - 在同级插入一个
div作为日历面板容器，用flatpickr初始化时传入appendTo: containerEl - 选中后调用
inputEl.value = date.toISOString().split('T')[0]并触发inputEl.dispatchEvent(new Event('change')) - 确保
inputEl.name和id不变，表单提交路径完全一致
min/max 属性在降级后还起作用吗
不起作用。原生 min/max 是浏览器 UI 层逻辑，JS 日历库（如 flatpickr）完全不读取这些属性，也不会自动同步。
立即学习“前端免费学习笔记（深入）”；
- 必须手动提取：
const minDate = inputEl.min ? new Date(inputEl.min) : null;，再传给日历库配置项（如minDate） -
flatpickr的minDate/maxDate接收Date实例或 ISO 字符串，但注意：它默认按本地时区解析字符串，"2024-01-01"在东八区是2024-01-01T00:00+08:00，可能比服务器预期早/晚一天 - 更稳妥的是统一用
new Date(inputEl.min + 'T00:00:00')构造，避免隐式时区偏移 - 禁用特定日期（如节假日）必须抽离为纯函数，传给
disable选项，不能依赖 HTML 属性
服务端校验为什么不能省
前端一切限制都可绕过：禁用 JS 后直接改 DOM value、用 DevTools 修改 min、手输 "2023-02-30"——这些在降级方案中尤其常见，因为 JS 日历库通常不接管原生校验逻辑。
- 后端收到的值必须先用正则
/^\d{4}-\d{2}-\d{2}$/匹配格式 - 再用严格解析：Node.js 中
const d = new Date(str); if (isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== str) { throw Error('invalid date'); } - 别信
valueAsDate：降级环境里它基本是null，统一走字符串解析路径 - 时区处理统一在服务端做：所有日期字段视为“无时区纯日期”，不补时间、不转 UTC，避免前端
toISOString()和后端LocalDate解析错位
真正难的不是让日历弹出来，而是让「用户看到的」、「代码拿到的」、「服务端存的」三者指向同一个日期含义——中间任何一环用错格式、漏掉时区归一、跳过运行时检测，都会在灰度期突然暴露为“选了昨天却存成今天”的线上问题。
