datetime-local 在 safari 和 firefox 中完全失效，应改用 date + time 双控件方案；需用 flex 布局对齐、添加 aria-label、避免 placeholder 和 step="1"；前后端合并时须补秒并显式时区，校验格式且统一时区归一化。
别用 datetime-local，它在 Safari 和 Firefox 里根本不能用——不是样式丑，是直接失效、变文本框、提交空值。
为什么 datetime-local 在生产环境基本等于废掉
Chrome/Edge 支持它，但 Safari（包括 iOS）完全不识别，Firefox 长期拒绝实现。用户一打开页面，看到的是个普通文本框，连日期面板都不弹；更糟的是，value 设成 "2024-05-20T14:30" 少一个字符（比如漏了 T 或秒位），浏览器就静默清空，不报错也不提示。移动端键盘行为也混乱：有些安卓机点开 time 会强制拉出秒选择器，哪怕你只想要分钟级精度。
拆成 date + time 的实际写法
用两个原生控件横向对齐，视觉上拼成一个整体，语义清晰、兼容性稳、移动端体验可控：
- 必须用
display: flex布局，gap控制间距，不用float或inline-block—— 后者在不同浏览器下基线对不齐 - 每个
input都要加aria-label，例如aria-label="预约开始日期"和aria-label="预约开始时间"，否则屏幕阅读器读出来就是“日期、时间”，没上下文 -
type="time"别乱加step="1"：默认step="60"是分钟级，加了step="1"反而在某些安卓机型上触发秒级滚轮，用户误操作率飙升 - 不要给
date或time加placeholder：Chrome 下date的placeholder直接被忽略，iOS 上time的 placeholder 不显示
前后端怎么安全合并 date + time 值
前端 JS 拼字符串不是简单连起来，后端解析更不能直接 new Date("2024-05-20T14:30") —— 这会按用户本地时区解释，跨时区用户可能差一整天。
- 拼接格式必须是
dateValue + "T" + timeValue + ":00"（补上秒），例如"2024-05-20T14:30:00"，否则 JSDate构造失败或返回Invalid Date - 如果业务强依赖固定时区（比如全部用东八区），拼的时候显式加上偏移：
"2024-05-20T14:30:00+08:00"，避免浏览器自动换算 - 后端接收两个字段时，必须做格式校验：检查
date是合法 YYYY-MM-DD，time是 HH:mm 或 HH:mm:ss，再合成 ISO 字符串入库，不能只靠前端传过来的拼接结果 -
date输入框的值永远不带时区，time输入框的值永远不带日期——这是 HTML 规范定死的，别指望它们能自动绑定
真正容易被忽略的点是：即使你前端拼对了、后端也按 UTC 存了，只要没在表单提交前做一次时区归一化（比如统一转成 UTC 时间戳再发），用户在纽约选的 “2024-05-20 14:30”，到服务器可能变成 “2024-05-20 06:30 UTC”，而你以为他选的是北京时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
