原生 input type="date" 在 safari 旧版、安卓 webview 等环境不触发日历控件，可能降级为文本框；需检查 css 遮挡、value 值合法性，并用 js 检测支持性后按需 polyfill。
input type="date" 为什么点不开日历？
浏览器原生 input type="date" 在部分环境（如 Safari 旧版本、某些安卓 WebView、或禁用 JS 的页面）根本不会触发日历控件，甚至渲染成普通文本框。这不是你代码写错了，而是浏览器支持不一致导致的。
常见现象：input type="date" 显示为纯文本输入框，点击无反应；或者日期格式被强制为 yyyy-MM-dd，但用户无法通过键盘随意输入（比如输成 2024/12/25 会直接清空）。
- 确保
<input type="date">没有被 CSS 设置pointer-events: none或opacity: 0等遮挡行为 - 不要给它设
value为空字符串（value=""），这在 Chrome 中会导致初始状态异常；应省略value属性或设为合法 ISO 格式（如value="2024-06-15"） - 移动端 WebView（如微信内置浏览器）常降级为文本输入，需额外检测并引入 polyfill
input type="datetime-local" 为什么时间选不了？
input type="datetime-local" 要求值必须是 yyyy-MM-ddThh:mm 格式（无秒、无时区），且浏览器会按本地时区解析和显示。很多开发者填了带秒或带 Z 的 ISO 时间（如 "2024-06-15T14:30:00Z"），结果控件直接变空或报错。
- 设置初始值前务必截断：用
new Date().toISOString().slice(0, 16)获取合法字符串 - 获取用户输入后，
input.value返回的就是yyyy-MM-ddThh:mm，注意它不含时区信息，服务端需按前端所在时区处理 - Firefox 目前不支持
datetime-local，会退化为文本框 —— 别依赖它做关键时间采集
如何让 date/datetime-local 兼容老浏览器？
没有万能方案，但可分层应对：优先用原生控件，检测不支持时自动加载轻量级 JS 日历库（如 flatpickr 或 vanilla-picker）。
判断是否支持：
const isDateSupported = typeof document.createElement('input').type === 'string' &&
document.createElement('input').type === 'date';
- 不要用
Modernizr这类大库做单一特性检测，几行 JS 就够 - polyfill 库建议用
flatpickr（gzip 后约 12KB），初始化时传入原input元素，它会自动隐藏原生控件并接管 UI - 若用 Vue/React，别直接操作 DOM，应在 mounted/useEffect 中检测并挂载实例，避免 SSR 渲染冲突
服务端接收 date 类型 input 时要注意什么？
浏览器提交的 date 值永远是 yyyy-MM-dd 字符串，datetime-local 是 yyyy-MM-ddThh:mm —— 它们不是 Date 对象，也不是时间戳，更不带时区偏移。
- PHP 接收后别直接
strtotime($_POST['date'])，因为没时区上下文，可能默认转成服务器本地时间（如东八区服务器把2024-06-15当作2024-06-15 00:00:00 +0800） - Node.js 用
new Date(req.body.date)会按客户端本地时区解释，比如用户在纽约选2024-06-15，得到的是2024-06-15T04:00:00.000Z（UTC） - 最稳妥做法：前端明确传时区（如
Intl.DateTimeFormat().resolvedOptions().timeZone），或服务端统一按 UTC 存储，展示时再转换
input type="date" 和 datetime-local 表面简单，但跨浏览器行为、时区隐含逻辑、服务端解析边界全是坑。最容易被忽略的是：你以为用户选的是“某天”，其实它背后绑定的是“某地某时某分”，而这个“某地”浏览器不会告诉你。
