datetime-local 在 Safari 和 Firefox 中存在严重兼容性问题：Safari 旧版降级为 text，iOS 16.4 前无选择器；Firefox 缺少时间滚动器且不可样式化；各浏览器 valueAsNumber 行为不一，时区解析易出错；min/max/step 属性在 Safari 中常被忽略；需 JS 检测+替换方案并服务端双重校验。
datetime-local 在 Safari 和 Firefox 中根本不像 Chrome 那样工作
Chrome/Edge 渲染的是带日历+时间滚动器的完整控件，Safari（尤其 iOS 14.5 之前）直接当 type="text" 处理，连选择器都不弹；Firefox 桌面版虽支持，但只给日历 + 手动输入时间框，没有滚动器、不响应上下键、也不补零。这不是样式问题，是控件能力缺失。
所以别试图用 CSS 覆盖 ::-webkit-datetime-edit 或 ::-moz-datefield —— 这些伪元素在 Safari 旧版里压根不存在，在 Firefox 里也只控制日期部分，时间输入框完全不可样式化。
- 不要写
input[type="datetime-local"] { appearance: none; }：Safari 会忽略，Firefox 可能崩 UI - 禁用原生箭头（
::-webkit-calendar-picker-indicator）对 datetime-local 无效，它只作用于date和time - 想统一视觉？唯一可靠路径是检测 + 替换：用 JS 判断是否真支持，不支持就换成
type="text"并挂 flatpickr 或 vanilla-picker
value 和 valueAsNumber 在各浏览器返回值不一致
input.value 永远是字符串（如 "2026-06-18T14:48"），但 input.valueAsNumber 只在 Chromium 系浏览器返回毫秒时间戳，Firefox 返回 NaN，Safari 15.4 之前甚至抛 Invalid Date 错误。
直接 new Date(input.value) 更危险：它把字符串按 UTC 解析，东八区选的 14:48 会被当成 UTC 14:48（即北京时间 22:48）。你看到的“偏差”，其实是时区误读。
立即学习“前端免费学习笔记（深入）”；
- 安全取时间戳：用
new Date(input.value + ":00").getTime()—— 补:00让所有浏览器都按本地时间解析 - 要存 UTC 时间戳？别依赖浏览器自动转换，后端应统一按
input.value + "+08:00"（或你业务所在时区）解析 - 设默认值时，别用
new Date().toISOString().slice(0, 16)（那是 UTC 时间），改用new Date().toLocaleString("sv-SE", { hour12: false }).replace(/ /g, "T")
min/max 属性在 Safari 中对 datetime-local 完全失效
Chrome 支持 min="2026-06-18T14:00" 并禁用早于该时刻的选项，但 Safari（包括 macOS 13.6 和 iOS 16.3）会静默忽略这个属性，用户仍可手动输入或滑动到任意时间 —— 这不是 bug，是规范允许的“尽力而为”行为。
更糟的是，Safari 对 step="300"（5 分钟粒度）也常不生效，用户仍能输入 14:48:23 这类非法值（虽然提交时表单校验会失败，但体验已断）。
- 客户端防护：监听
input事件，用正则/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/校验格式，不匹配就清空或提示 - 服务端必须做双重校验：不仅检查格式，还要验证是否在业务允许的时间范围内（比如会议不能定在 30 秒前）
- 别指望
checkValidity()触发 UI 提示 —— Safari 和 Firefox 均不渲染原生错误气泡，得自己写提示逻辑
移动端 iOS 16.4 以下用户根本看不到 datetime-local 选择器
iOS Safari 直到 16.4 才真正支持 datetime-local，16.3 及更早版本会回退成纯文本框，且不校验格式、不限制输入、不触发 change 事件。用户输 "hello" 或 "2026/06/18 14:48"，后端收到的就是原样字符串。
靠 "datetime-local" in document.createElement("input").type 检测毫无意义 —— Safari 会返回 true，但实际控件已降级。真正可靠的检测方式是：
- 创建临时 input：
const el = document.createElement("input"); el.type = "datetime-local"; - 检查
el.type === "datetime-local"且getComputedStyle(el).appearance !== "textfield" - 再加一层运行时验证：设一个测试值，看
el.value是否被清空（清空说明解析失败）
一旦检测失败，立刻替换为 type="text" + inputmode="numeric" + pattern="\d{4}-\d{2}-\d{2}T\d{2}:\d{2}"，并挂 JS 日期选择器。否则，你面对的不是样式差异，而是数据污染。
