input type="time" 仅用于选择当日时刻,返回"HH:MM"或"HH:MM:SS"字符串;不支持日期、时区,min/max需用"HH:MM"格式,step单位为秒,iOS Safari兼容性差且需额外校验。

input type="time" 的核心用途是让用户选择“当天的某个时刻”,它不带日期、不带时区,只返回 "HH:MM" 或 "HH:MM:SS" 字符串。别指望它能选“明天下午三点”或“北京时间14:30”——这些语义它根本不理解。
怎么设置默认值和限制可选范围
直接写 value="09:30" 就能预设初始时间;但注意:如果这个值超出 min/max 范围,部分浏览器会静默忽略,输入框可能显示为空或回退到 min 值。
-
min和max必须用"HH:MM"格式(如min="08:00"),不能带秒或日期 -
step单位是秒:step="300"表示只允许选整5分钟(:00、:05、:10…),step="1"才支持秒级选择 - 用户仍可手动输入非法值(比如
"25:99"),input.checkValidity()只校验格式,不校验逻辑合法性
为什么读不到 Date 对象,而总是字符串
input.value 永远是字符串,比如 "14:30"。试图对它调用 .getFullYear() 会报错;想转成时间做计算,得自己构造 Date 实例:
- 别用
new Date(input.value)—— 在旧版 Safari 中可能返回Invalid Date - 推荐方式:
const [h, m] = input.value.split(':'); const date = new Date(); date.setHours(+h, +m, 0, 0); - 如果只是比大小(比如判断是否晚于 18:00),直接字符串比较更安全:
input.value > "18:00"
iOS Safari 上几乎等于没用
截至 iOS 17.4,Safari 才开始有限支持原生时间选择器;此前所有版本都只渲染为普通文本框,且无任何格式约束或键盘优化。这意味着:
立即学习“前端免费学习笔记(深入)”;
- 用户可以输
"abc"、"14-30"、"下午2点半",浏览器不会拦截 -
input.validity.valid在输"25:99"时仍可能为true,因为格式上它“看起来像时间” - 必须服务端再次解析并校验,前端 JS 也得补一层:检查
input.value是否匹配/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/,再验证小时/分钟数值范围
最常被忽略的一点:你写的 min="09:00" 在 iOS 上完全不起作用,连视觉禁用都没有。真要强一致性,得用 @supports 特性检测后加载轻量 JS 选择器,而不是靠 CSS 或属性硬撑。



















