HTML时间输入框怎么单独提取小时和分钟-html教程-PHP中文网

input[type="time"]返回"14:30"类字符串，需用split(':')拆分再parseint转数字；空值需校验；旧浏览器需正则提取并处理am/pm。

html时间输入框怎么单独提取小时和分钟

用 `input[type="time"]` 获取原始值再拆分

浏览器原生的 <input type="time"> 提交或读取时返回的是形如 "14:30" 的字符串（24 小时制，两位小时+两位分钟，带冒号），不是 Date 对象，也没法直接取 .getHours()。必须手动解析这个字符串。

常见错误是试图对 input.value 调用 Date 方法，结果得到 Invalid Date 或 NaN —— 因为它根本不是完整时间戳，也没有日期部分。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

用 split(':') 最直接：

const timeStr = input.value; // "09:05"
const [hours, minutes] = timeStr.split(':'); // ["09", "05"]
const hourNum = parseInt(hours, 10); // 9
const minuteNum = parseInt(minutes, 10); // 5

注意：value 可能为空字符串（用户未选择），需提前判断 if (!timeStr) return;
不要用 new Date(timeStr)，它在多数浏览器中会返回 Invalid Date（缺少日期上下文）

需要兼容老浏览器？避免 `type="time"` 的 fallback 方案

IE 和部分旧版 Safari 不支持 type="time"，会退化成普通文本框，此时用户可能输入 "9:5"、"9:05 AM" 甚至 "下午3:30"，正则和 parseInt 就比 split 更稳妥。

提取纯数字小时和分钟（忽略 AM/PM 和空格）：

const match = timeStr.match(/(\d{1,2}):(\d{2})/);
if (match) {
  const hourRaw = parseInt(match[1], 10);
  const minute = parseInt(match[2], 10);
  const hour24 = timeStr.includes('PM') && hourRaw

更简单做法：统一用两个 <input type="number"> 分别控制小时（0–23）和分钟（0–59），绕过解析逻辑
如果必须用单输入框且要强校验，监听 input 事件 + 正则实时格式化，比如自动补零、过滤非法字符

后端接收时注意时区和格式一致性

前端拿到的 hours 和 minutes 是本地时区下的“钟表时间”，不带时区信息。如果业务涉及跨时区调度（比如全球会议），仅存小时分钟是不够的 —— 必须结合日期和用户时区，或统一转成 UTC 时间戳再拆。

后端收到 hours=14&minutes=30，不能直接当成 UTC 14:30 存；要明确这是用户本地的 14:30
若需服务端计算，建议前端传 ISO 格式时间字符串（如 "2024-06-15T14:30"），由后端解析并提取 .getHours() 和 .getMinutes()
数据库字段类型选 TIME（MySQL）或 time of day（PostgreSQL）即可，它们只存时分秒，不涉及时区