结论：iOS 原生日期选择器需同时满足 html lang 匹配系统区域、viewport meta、无 readonly/disabled、无禁用 CSS 等条件，缺一则退化为文本框；Android 和 Firefox 需分层降级，微信/X5 及 iOS≤14 应强制使用双 input + 动态触发或轻量日历库。
直接说结论：不是代码写错了，而是 iOS 对 input[type="date"] 的唤起有硬性限制——缺一个条件，它就当普通文本框用。
为什么点不动？iOS 原生日期选择器的触发条件
常见现象是点击无反应、光标不出现、甚至输入框里连 placeholder 都不显示。根本原因不是浏览器 bug，而是 Safari 强制要求同时满足以下全部条件：
-
必须存在且值匹配系统区域（比如“中国”或“美国”，不能是en或空） - 页面必须有
<meta name="viewport" content="width=device-width, initial-scale=1"> -
input不能带readonly、disabled，也不能被 JS 动态加过这两者（哪怕只加了一帧） - CSS 不能含
appearance: none、pointer-events: none、display: none或opacity: 0 - iOS 12.5 及更老版本基本不支持，别指望它能弹窗
Android 和 Firefox 的 fallback 怎么做才轻量
Firefox 桌面版默认关掉日期控件，需用户手动进 about:config 开启 dom.forms.datetimepicker.enabled；Android WebView 和 iOS 微信 X5 内核则根本不认 showPicker()。这时候强行 polyfill 成本高，推荐分层处理：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先用
type="text"+placeholder="YYYY-MM-DD"保底显示 - 用
Modernizr.inputtypes.date或简单 UA 检测判断是否原生可用 - 不可用时，只加载一个轻量日历库（如
vanilla-picker），而不是 fullcalendar - 避免在
DOMContentLoaded就初始化 picker，等用户真点击了再动态 import
微信和 iOS 老版本最稳妥的兜底方案
微信内置浏览器（X5 内核）和 iOS ≤14 的设备，原生 type="date" 基本失效。这时别拼兼容，直接切到可控路径：
- HTML 结构用双 input：
<input type="text" class="fake-date"><input type="date" class="real-date" aria-hidden="true"> - JS 监听
fake-date的focus，然后调real-date.focus()（iOS 15+ 支持该链式触发） - 若失败，再 fallback 到
vanilla-picker并绑定到fake-date - 提交前统一取
fake-date.value，后端按YYYY-MM-DD解析即可，不用改接口
真正难的不是写个日历面板，而是判断什么时候该让它“假装是原生”，什么时候该彻底放弃——边界情况（比如用户系统语言设成英文但区域是中国）往往比代码逻辑更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
