原生<input type="datetime-local">因兼容性差（Firefox不支持、旧版Safari受限）且值格式严格（ISO无秒及时区），常失效；推荐用flatpickr，需配置enableTime: true、dateFormat: "Y-m-d H:i"，默认时间用defaultDate: new Date()，取值用fp.format(...)，中文需手动引入locale，传后端前统一转ISO格式。
HTML原生<input type="datetime-local">为什么总不生效
因为浏览器兼容性差，且必须传ISO格式的值（"2024-05-20T14:30"），不能带秒或时区；Chrome支持，Safari直到iOS 16.4才支持，Firefox仍不支持。如果页面需兼容旧版Safari或Firefox，直接用原生控件等于放弃用户。
用flatpickr实现轻量级日期+时间组合选择
比moment.js+bootstrap-datetimepicker更现代、无依赖、体积小（gzip后约15KB）。关键点：
- 初始化时必须设置
enableTime: true和dateFormat: "Y-m-d H:i"，否则只显示日期 - 若要默认选中当前时间，用
defaultDate: new Date()，不要写字符串 - 获取值用
fp.format(fp.selectedDates[0], "Y-m-d H:i")，避免直接读input.value（可能为空或格式错） - 中文locale需单独引入
flatpickr/dist/l10n/zh.js并调用flatpickr.localize(flatpickr.l10n.zh)
type="datetime-local"和flatpickr的值怎么传给后端
后端通常要ISO 8601格式（如"2024-05-20T14:30:00"），但两者输出不同：
- 原生
datetime-local的input.value是"2024-05-20T14:30"（无秒，无Z），需补:00再发 -
flatpickr默认输出"2024-05-20 14:30"（空格分隔），要用toISOString()转换：先new Date(str)再调.toISOString()，注意时区——它按本地时间转UTC，若后端要本地时间，得手动拼接"2024-05-20T14:30:00+08:00"
移动端日期时间选择的隐藏陷阱
iOS Safari在input[type="datetime-local"]上会强制弹出系统键盘（而非时间滚轮），导致体验断裂；而flatpickr在iOS上默认禁用原生输入，靠自定义面板，但需加mobileNative: false确保一致。另外，Android Chrome对min/max属性的支持不稳定，建议JS层双重校验，比如选完时间后立刻检查if (selected 。
立即学习“前端免费学习笔记（深入）”；
