HTML原生datetime-local支持年月日及时分（不支持秒和时区），需按“YYYY-MM-DDThh:mm”格式设置value；旧版Safari不支持，移动端iOS分双滚轮；秒级精度需组合控件或JS处理；时区问题易致后端解析偏差。

HTML原生不支持选时间

直接用 只能选年月日，点开控件里根本没有时分秒——这是规范限制，不是浏览器 bug。W3C 明确把日期和时间拆成不同类型：date、time、datetime-local。想一起选，必须换类型。

datetime-local 是唯一原生支持年月日+时分的类型

它能同时选日期和时间（精确到分钟），但注意：不支持秒，也不带时区。服务端接收时通常按本地时间解析，容易出偏差。

• 必须设置 value 格式为 "YYYY-MM-DDThh:mm"（如 "2024-05-20T14:30"），中间是大写 T，不能用空格或横线代替
• 用户输入后，input.value 返回的也是这个格式字符串，不是 Date 对象，需手动转： new Date(input.value)
• 部分旧版 Safari（≤15.6）不支持该类型，会降级成普通文本框，得用 JS 检测并补 fallback
• 移动端 iOS 的 picker 界面只显示“日期”和“时间”两个独立滚轮，不是单个集成控件

要秒级精度？只能靠组合 + JS 或第三方库

原生 HTML 没有 datetime-local-second 这种类型。真要年月日时分秒，常见做法是：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 用两个原生控件：一个 + 一个 （step="1" 让秒可选），再用 JS 合并值
• 用 —— 虽然规范允许 step，但目前仅 Chrome/Edge 支持秒级输入，Firefox 和 Safari 忽略 step，仍只到分钟
• 放弃原生，用 flatpickr、dayjs 配合自定义 UI，或用 + mask + 校验

服务端接收时别忽略时区陷阱

前端用 datetime-local 提交的值（如 "2024-05-20T14:30"）不含时区信息，但多数后端框架（如 Python Flask、Node.js Express）默认按服务器本地时区解析。结果可能是：用户在东八区选了 14:30，后端却存成 UTC 时间 06:30。

• 最稳做法：前端用 new Date().toISOString().slice(0, 16) 生成带 Z 的 ISO 字符串（如 "2024-05-20T06:30Z"），后端统一按 UTC 存
• 如果必须用 datetime-local 值，后端需显式指定时区（如 Python 用 datetime.fromisoformat(val).replace(tzinfo=ZoneInfo('Asia/Shanghai'))）
• 数据库字段推荐用 TIMESTAMP WITH TIME ZONE（PostgreSQL）或 DATETIME + 显式时区列，别只存字符串

时区处理和秒级精度是实际项目里最容易漏掉的两处，尤其跨地区部署时，前端看似选对了，后端时间差 8 小时还查不出原因。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！