HTML5 在旧浏览器中直接回退为文本框而非兼容，需运行时检测支持性：创建临时 input 并判断 input.type === 'date'；不支持时推荐 flatpickr（配 dateFormat: "Y-m-d"）并校验格式、同步 value、处理 Safari 时间戳兼容性。
HTML5 的 在旧浏览器（如 IE10 及以下、Android 4.3 以下、iOS 7 以下）根本不会渲染为日期选择器，而是回退为普通文本框 —— 这不是“兼容”，是直接失效。降级不是加个 polyfill 就能自动变日历，关键在「有无原生支持」的检测 + 手动接管逻辑。
怎么判断浏览器是否支持
不能靠 UA 字符串，必须运行时检测。核心是创建一个临时 input 元素，赋值 type="date"，再读取其 type 属性：
const input = document.createElement('input');
input.type = 'date';
const isDateSupported = input.type === 'date';
如果返回 false，说明浏览器不支持原生日期控件，需手动引入降级方案。注意：某些 Android WebView 虽然返回 true，但选择后无法触发 change 事件，实际仍需监听 blur 或 input 做兜底。
不支持时该用哪个日期插件替代
选插件前先明确需求场景：
立即学习“前端免费学习笔记（深入）”；
- 纯表单提交且不需要复杂范围限制 → 用
flatpickr（轻量、无依赖、IE9+ 支持） - 项目已用 jQuery →
jQuery UI Datepicker（但注意它不支持 ISO 格式输出，默认是mm/dd/yyyy） - 需要和
行为一致（比如提交时自动转为YYYY-MM-DD）→ 必须选能强制输出 ISO 格式的库，如flatpickr配置dateFormat: "Y-m-d"
避免踩坑：pickadate.js 已停止维护；bootstrap-datepicker 默认不校验格式，用户手输非法日期（如 2023-02-30）也不会报错。
如何让降级后的日期输入和原生行为一致
原生 有三个关键行为：只接受 YYYY-MM-DD 格式、点击唤起系统日历、空值时 value 为 ""。降级时必须对齐：
- 初始化插件前，先检查 DOM 元素是否有
value，若有则确保是合法 ISO 格式（否则插件可能初始化失败或显示为空） - 绑定插件后，监听其选择事件，手动设置
input.value为YYYY-MM-DD（不能用插件默认的本地化格式） - 表单提交前，建议再做一次正则校验：
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/.test(input.value)
特别注意：Safari 14.1 之前版本虽然支持 type="date"，但 input.valueAsNumber 返回 NaN，涉及时间戳计算时得用 new Date(input.value).getTime() 替代。
真正麻烦的不是加个日历弹窗，而是让所有浏览器在「输入格式、空值处理、提交值、校验逻辑」上表现一致。很多项目卡在 iOS 微信内置浏览器里日期插件点不动，其实是因为它禁用了 touchstart 事件冒泡 —— 得给插件容器加 cursor: pointer 和 onclick="" 强制触发。
