### [date、time、datetime-local 三类输入对照](https://www.huociguo.com/article/1872)

**Published:** 2026-10-04T03:22:49

**Author:** 米了

**Excerpt:** 🗓️ 原生日期时间输入有三个类型，格式与语义各不相同，用错会提交异常值。类型格式时区典型用途 YYYY-MM-…

🗓️ 原生日期时间输入有三个类型，格式与语义各不相同，用错会提交异常值。

| 类型  | 格式  | 时区  | 典型用途 |
| --- | --- | --- | --- |
| `date` | YYYY-MM-DD | 无   | 生日、截止日 |
| `time` | HH:mm | 无   | 每日时段 |
| `datetime-local` | YYYY-MM-DDTHH:mm | 无   | 本地事件时刻 |

![日期时间时钟示意](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-277371.jpeg)

三类时间输入，格式各不同

三者均不带时区，提交的是本地字符串。⚠️ 涉及跨时区业务，需 JS 自行转换并附时区信息，不能依赖控件。

兼容性问题：老版本浏览器不支持原生控件，退化成普通文本框。兜底方案是 `type="text"` 加 `pattern` 约束输入，保住表单可用性。其余场景，移动端原生控件体验最佳。

**Tags:** date 输入, datetime-local, time 输入, 原生日期控件, 时区处理

**Categories:** HTML5

---