原生input[type="date"]无ui一致性，仅语义与格式一致；chrome/edge功能完整但样式锁死，safari 15.4前及旧edge功能缺失，firefox和微信浏览器不可交互；必须运行时检测showpicker并降级为隐藏原input+flatpickr，服务端严格校验yyyy-mm-dd格式与日期有效性。
原生 input[type="date"] 在不同系统和浏览器中根本不存在“UI一致性”，它只是语义一致、格式一致、行为分层不一致——你不能靠 CSS 修好一个没功能的控件，也不能靠 polyfill 补出系统级弹层。
Chrome/Edge(Chromium) 能用但样式完全锁死
点开会弹出日历面板，min、max、required 都生效，校验逻辑可靠；但右侧箭头只能用 ::-webkit-calendar-picker-indicator 隐藏，无法替换成图标或调整大小；placeholder 设了也看不见；给 input 加 transform 或 position: fixed → iOS Safari 下弹层直接错位或不出现。
- 别试图用
appearance: none+ 自定义背景统一外观——在 Chrome/Safari/Edge 中它只影响输入框本体，不影响弹层 -
value必须是"2024-06-14"字符串，用setAttribute('value', '2024/06/14')会失败，输入框变空 - 动态设置
min/max时传Date对象（如new Date()）→ 浏览器直接忽略，必须是 ISO 字符串
Safari 15.4 之前和旧版 Edge(EdgeHTML) 功能彻底缺失
不是“样式难看”，是点击无响应、不渲染日历图标、checkValidity() 返回 true 但实际无法验证——Safari 14 的 el.type = 'date' 返回 true，但 'showPicker' in el 是 false，用户只能手动输字符串，且输错格式也不会拦截。
- 检测必须运行时：创建元素后判断
el.type === 'date' && 'showPicker' in el，别信Modernizr.inputtypes.date或 UA 字符串 - 降级不能删掉原
input，否则 Vue/React 响应式断裂、form.serialize()丢字段、label[for]失效、屏幕阅读器读不出“日期”语义 - 正确做法：设
style="position: absolute; opacity: 0; pointer-events: none;"隐藏原 input，在同级插入div用 flatpickr 初始化，并手动同步min/max值
Firefox 和 iOS WebView / 微信内置浏览器长期不可交互
Firefox 104+ 仍渲染为纯文本框，无日历 UI，min/max 不生效，showPicker 不存在，click 事件唤不起任何东西；iOS WebView 和微信浏览器因系统限制，常导致弹层不触发或日期值为空——这不是 bug，是平台策略性屏蔽。
- Firefox 下
input.valueAsDate不可用，得 fallback 到new Date(input.value)，但要加非空和有效性校验 - flatpickr 的
minDate接收字符串时默认按本地时区解析，"2024-01-01"在东八区是2024-01-01T00:00+08:00，比服务器预期早一天；稳妥写法是new Date(inputEl.min + 'T00:00:00') - 服务端收到的值永远可能被绕过，必须用正则
/^\d{4}-\d{2}-\d{2}$/+ 日期有效性检查（比如拒绝2024-02-30）
显示格式和提交格式必须物理隔离
input[type="date"] 的 value 永远只能是 "YYYY-MM-DD"，这是规范强制的；你想显示“2024年6月14日”或“14/06/2024”，只能在视图层额外渲染，不能动 input.value。
- 别在 Vue 的
v-model或 React 的value里塞中文格式字符串，控件会变只读或报错 - 显示用：
input.valueAsDate?.toLocaleDateString("zh-CN", { year: "numeric", month: "long", day: "numeric" }) - 提交用：保持原生
input.value不变，它始终是标准格式，后端可直喂LocalDate.parse()或datetime.date.fromisoformat() - 前端 JS 取值别直接
new Date(input.value)，部分 Safari 会返回Invalid Date；改用new Date(input.value + 'T00:00')
最易被忽略的一点：所有“兼容方案”的前提，是你能准确识别哪些环境真有交互能力。很多项目卡在 Safari 15.4 和 16.4 的临界点上，showPicker 存在与否决定了整个降级链是否启动——它不是渐进增强，是开关式切换，漏判一次，就有一批用户面对空白输入框却以为功能正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
