可靠检测 datetime-local 支持需创建 input 元素并设 type="datetime-local"，检查其 type 值是否仍为 "datetime-local" 且 getComputedStyle(input).appearance 不等于 "textfield"；Firefox 虽支持但无滚动器，需手动补零、校验格式并设 step="300"；Safari 14.4 及更早版本静默降级为 text，须用 pattern 和 JS 引导格式；其值为 ISO 字符串，解析时须注意时区，避免 new Date() 直接转换导致偏移错误。
datetime-local 在 Safari 14.4 及更早、IE 全系、旧版 Firefox 中根本不可用——它会无声降级为 type="text"，既无选择器，也不校验格式。别信 "datetime-local" in document.createElement("input").type 的检测结果，那在旧 Safari 里也返回 true，但实际无效。
怎么可靠检测浏览器是否真支持 datetime-local
不能只查字符串支持，得看浏览器是否真正渲染并保留该类型：
- 创建临时
input元素，设input.type = "datetime-local" - 检查
input.type === "datetime-local"（若被降级，值会是"text"） - 再加一层保险：用
getComputedStyle(input).appearance判断是否显示为原生控件（如返回"textfield"就说明已退化）
示例检测函数：
function isDateTimeLocalSupported() {
const input = document.createElement('input');
input.type = 'datetime-local';
return input.type === 'datetime-local' &&
getComputedStyle(input).appearance !== 'textfield';
}
Firefox 时间输入没滚动器，怎么补救
Firefox 自 99 起支持 datetime-local，但 UI 只有日历 + 文本框，不提供小时/分钟滚轮，用户必须手动输 13:54，且不会自动补零或防错。
立即学习“前端免费学习笔记（深入）”；
- 监听
input事件，用正则匹配^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$校验格式 - 输入时自动补零：比如用户输
2026-06-17T9:5，立刻修正为2026-06-17T09:05 - 设
step="300"（5 分钟粒度），减少手动输入负担；step="1"在 Firefox 里常被忽略
Safari 14.4 及更早版本直接不识别，必须降级
iOS 14.4 及更早的 Safari 完全无视 type="datetime-local"，连 min/max 都不生效，用户只能手输 2026-06-17T14:30 这种格式，极易漏掉 T、用中文冒号、多输秒数。
- 降级方案首选
type="text"+pattern属性：pattern="\d{4}-\d{2}-\d{2}T\d{2}:\d{2}"触发基础校验 - 配合 JS 做格式引导：聚焦时插入占位符
YYYY-MM-DDTHH:MM，失焦时校验并提示 - 避免直接引入 jQuery 插件（如老版 layDate），其输出格式是
"2026-06-17 14:30:00"，与原生datetime-local的"2026-06-17T14:30"不一致，后端需额外适配
datetime-local 的值永远是字符串，别直接 new Date(input.value)
浏览器返回的值是类似 "2026-06-17T14:30" 的 ISO 8601 字符串，JS 解析时默认当 UTC 处理——你选的是北京时间 14:30，new Date("2026-06-17T14:30") 实际构造的是 UTC 时间 14:30，即北京时间 22:30。
- 安全做法：手动拼本地偏移，如
new Date(input.value + "-08:00")（东八区） - 更健壮：用
dayjs(input.value).local()或luxon.DateTime.fromISO(input.value, { zone: 'local' }) - 后端接收前必须明确约定：所有
datetime-local提交值按客户端本地时间解释，不转 UTC；否则时区一乱，数据就废了
最易被忽略的点：即使所有浏览器都“支持” datetime-local，Firefox 的交互缺失、Safari 的旧版静默降级、JS 解析时的时区陷阱，三者叠加，足以让一个看似简单的控件在线上出问题。别等 QA 报 bug 才补，检测、降级、解析三步缺一不可。
