Chrome/Edge（Chromium）支持原生日期选择器，功能完整但样式不可控；Safari 15.4+ 逐步完善，旧版及 Firefox 完全不支持；iOS WebView 和微信浏览器存在系统级限制，需降级为 text + flatpickr；服务端必须严格校验 YYYY-MM-DD 格式与日期有效性。
Chrome / Edge（Chromium内核）能点开但样式不可控
原生弹出日历面板，支持 min、max、required 等属性，校验逻辑可靠；但无法用 CSS 修改日历弹层、无法隐藏或重绘右侧箭头（仅能用 ::-webkit-calendar-picker-indicator 隐藏）；placeholder 会被忽略，设了也不显示。
常见踩坑点：
- 给
input加transform或position: fixed→ iOS Safari 下弹层错位或不出现 - 用
setAttribute('value', '2024/05/10')赋值 → 值不生效，输入框空白 - 动态设置
min/max时传入Date对象 → 浏览器直接忽略，必须是"2024-05-10"字符串
Safari 15.4 之前和旧版 Edge（EdgeHTML）根本点不开
input.type = 'date' 在 Safari 14 返回 true，但点击无响应；旧版 Edge 直接降级为普通 text 输入框，连日历图标都不渲染。这不是“样式不好”，是功能完全缺失——用户既不能点选，也无法通过键盘输入合法日期格式，checkValidity() 也形同虚设。
检测方式必须务实：
- 别用
Modernizr.inputtypes.date：它只判断属性是否存在，不反映可交互性 - 正确做法：
const el = document.createElement('input'); el.type = 'date'; const isInteractive = el.type === 'date' && 'showPicker' in el; - 对不支持的环境，手动改
el.type = 'text'，再加载flatpickr初始化，避免全站 polyfill 干扰 Vue/React 的事件流
Firefox 目前仍不支持原生日期选择器
截至 Firefox 104+，input[type="date"] 仍渲染为纯文本框，无任何日历 UI，placeholder 可显示但 min/max 不生效。它不提供 showPicker，也不响应 click 事件唤起控件。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
应对策略不是硬补 UI，而是分层兜底：
- 保留语义：仍用
input[type="date"]，确保无障碍阅读器识别为日期控件 - 视觉对齐：用
appearance: none+ 自定义背景/边框统一基础样式 - 逻辑一致：监听
input事件，用input.valueAsDate（Safari 15.4+ / Chrome / Edge 支持）或new Date(input.value)（需校验非空）统一取值 - 服务端必须校验：前端一切限制都可绕过，后端收到的值必须按
YYYY-MM-DD正则匹配 + 范围检查 + 日期有效性（如 2024-02-30 不合法）
iOS WebView 和微信内置浏览器经常失效
iOS 对 iframe 内的 input[type="date"] 支持极差，微信 Android 版在部分机型上点击无反应，甚至唤起空白面板。这不是配置问题，是系统级限制。
关键规避手段：
- 避免在
iframe中使用该控件 - 确保页面有正确
<meta name="viewport" content="width=device-width, initial-scale=1"> - UA 检测到微信或特定 WebView 时，直接 fallback 到
type="text"+flatpickr或van-calendar - 不要依赖
change事件：部分安卓机不触发，改用input+blur组合捕获值变化
实际项目里最易被忽略的，是服务端解析逻辑——浏览器提交的永远是 YYYY-MM-DD 字符串，但若后端用 new Date('2024-06-12') 构造，再转成时间戳，就会因时区转换多/少一天。直接字符串切片或用 dayjs(value, 'YYYY-MM-DD') 这类严格模式解析器，比任何前端 polyfill 都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
