time 输入框的 step 属性以秒为单位控制分钟级步长(如15分钟为step="900"),需配合javascript实现范围限制和校验,因原生不支持min/max;value应设为hh:mm格式且秒数为0,后端必须重新验证时间合规性。

time 输入框的步长用 step 控制,单位是秒;范围限制需配合 JavaScript 实现,因为原生不支持 min/max。
step 设置分钟级时间步长
type="time" 的 step 属性以秒为单位,不是分钟。浏览器据此对齐可选时间点(如 09:00、09:15),但仅影响选择器交互,不阻止手动输入。
- 每 1 分钟:step="60"
- 每 5 分钟:step="300"
- 每 15 分钟:step="900"
- 每 30 分钟:step="1800"
- 每 1 小时:step="3600"
示例:<input type="time" step="900"> 用户在选择器中只能点选 08:00、08:15、08:30 等整 15 分钟时刻。
默认值要对齐步长才稳定
若未设 value 或 value 秒数非 0(如 "09:07"),部分浏览器可能自动舍入或显示异常,导致初始值与步长错位。
- 推荐显式设置 value,且秒数为 0,例如:
value="14:30" - 避免写成
value="14:30:00"(虽合法,但部分旧版 Safari 可能解析异常) - 动态场景可用 JS 计算并赋值,如取当前时间向上对齐到最近 15 分钟点
无法用 min/max 限制 time 范围
HTML5 规范中,min 和 max 属性对 type="time" 无效。浏览器不会禁用或灰显超出范围的时间选项,也不会触发原生校验。
- 若需限定“只允许选 09:00–17:00”,必须用 JavaScript 监听 change/input 事件做判断
- 示例逻辑:解析 value 得到总分钟数(
hours * 60 + minutes),检查是否在 [540, 1020] 区间内(即 09:00–17:00) - 校验失败时调用
setCustomValidity()并触发reportValidity()显示提示
后端和 JS 校验不可省略
step 和前端 JS 都只是体验优化手段,用户仍可通过粘贴、开发者工具或绕过 JS 提交任意时间。
- 服务端必须重新解析时间字符串,验证其是否符合业务步长(如是否为 15 分钟倍数)和区间要求
- 建议统一用 HH:mm 格式接收,避免处理秒字段带来的歧义
- 对不合规输入返回明确错误,不要静默修正,以免掩盖用户真实意图











