用于选择本地时区的hh:mm(或hh:mm:ss)时间,不包含日期与时区信息;value、min、max须为合法24小时制字符串,浏览器仅ui约束范围,js读取为字符串,提交为纯文本,跨时区需手动处理。

time 类型 input 元素的基本用法
HTML 的 <input type="time"> 提供原生时间选择器,支持小时和分钟(可选秒),不包含日期。浏览器会自动渲染为时间选择控件(如滚动滚轮或下拉时间表),但**不校验时区,也不携带时区信息**——值始终以本地时区解析并提交为 HH:MM 或 HH:MM:SS 格式。
基础写法只需指定类型和 name:
<input type="time" name="meeting_time">
注意:value 必须符合 HH:MM 格式(24 小时制,两位小时+两位分钟),例如 "09:30" 合法,"9:30" 或 "09:30 AM" 会被忽略。
设置默认值与限制范围(min/max)
用 value 设初始值,用 min 和 max 控制可选时间范围。这些属性值也必须是 HH:MM 格式,且仅比较时间部分(不考虑日期)。
-
min和max是字符串,不是 Date 对象或毫秒数 - 若
min="08:00"且value="07:00",输入框会显示空值(因初始值超出范围) - 用户仍可通过手动输入绕过 min/max 限制(浏览器只做 UI 约束,不阻止键盘输入非法值)
示例:
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<input type="time" name="shift_start" min="06:00" max="14:00" value="09:00">
获取与提交时间值的注意事项
JavaScript 读取 input.value 得到的是字符串(如 "14:45"),不是 Date 实例。想转成时间戳或参与计算,需手动解析:
const timeStr = document.querySelector('input[type="time"]').value;<br>if (timeStr) {<br> const [hours, minutes] = timeStr.split(':').map(Number);<br> const date = new Date();<br> date.setHours(hours, minutes, 0, 0); // 注意:这会修改当天日期,且受本地时区影响<br>}
表单提交时,该字段按原样作为 URL 参数或 FormData 键值对发送,后端收到的是纯字符串,**没有隐含时区含义**。如果业务需要 UTC 时间或带时区处理,必须前端显式转换(比如用 date.toISOString() 截取时间部分再拼接)或后端约定解释规则。
兼容性与常见失效场景
Safari 在 iOS 15.4 之前不支持 step 属性;所有浏览器都不支持 step="1" 表示“精确到秒”——必须写成 step="1"(单位是秒),但实际支持程度参差:Chrome 支持 step="60"(分钟级),Firefox 对 step 基本忽略。
容易被忽略的关键点:
- 安卓 WebView 和部分旧版 UC 浏览器完全不渲染 time 输入框,回退为文本框,且无格式提示
- 用户粘贴非标准格式(如
"2:30pm")会导致input.value为空字符串,需监听input事件做校验 - 服务端不能假设该字段一定有值——即使设了
required,用户仍可禁用 JS 后清空并提交
真正在意时间精度和跨时区一致性的场景,别只靠 type="time";要么加 JS 校验和标准化逻辑,要么换用带时区支持的第三方组件。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










