html 的值是 24 小时制字符串，因 html 标准规定其 value 必须为 utc 偏移无关的 "hh:mm" 格式（如 "14:30"），不带秒、时区或 am/pm；显示 12 小时制需手动解析格式化。
HTML <input type="time"> 的值为什么是 24 小时制字符串？
浏览器原生 <input type="time"> 返回的 value 永远是 "HH:mm" 格式（如 "14:30"），不带秒、不带时区、不自动适配本地 12 小时制。这不是 bug，是规范行为——HTML 标准明确要求其 value 必须为 UTC 偏移无关的 24 小时格式。
所以如果你看到 input.value 是 "02:30" 却期望它是下午 2:30，说明你漏掉了上下文：它本身不含 AM/PM 信息，也**不会因系统设置自动转成 12 小时制**。
- 想显示“2:30 PM”？必须手动解析 + 格式化
- 想提交“14:30:00”带秒？得自己补零或用
new Date()构造再格式化 - 想兼容 Safari（旧版不支持
time）？得降级为text+ 正则校验
用 JavaScript 把 input.value 转成 12 小时制字符串（含 AM/PM）
核心逻辑：拆分小时、判断是否 ≥12、处理 0 和 12 的特殊情况。
function to12HourFormat(timeStr) {
if (!timeStr || !/^\d{2}:\d{2}$/.test(timeStr)) return '';
const [hour, minute] = timeStr.split(':').map(Number);
const period = hour >= 12 ? 'PM' : 'AM';
const displayHour = hour % 12 || 12;
return `${displayHour}:${minute.toString().padStart(2, '0')} ${period}`;
}
// 示例：
// to12HourFormat('14:30') → '2:30 PM'
// to12HourFormat('00:15') → '12:15 AM'
// to12HourFormat('12:00') → '12:00 PM'
注意：padStart 在 IE 中不可用，如需兼容，改用 minute ；另外该函数不校验输入合法性，建议先用 <code>input.validity.valid 或正则兜底。
把用户输入的 12 小时制字符串（如 "2:30 PM"）转回 <input type="time"> 可接受的格式
原生 time 输入框只接受 "HH:mm"，所以必须反向转换。关键点是正确处理 "12:xx AM"（→ "00:xx"）、"12:xx PM"（→ "12:xx"）、"1:xx PM"（→ "13:xx"）。
function from12HourFormat(str) {
const match = str.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/i);
if (!match) return '';
let [, hour, minute, period] = match;
let h = parseInt(hour, 10);
if (period.toUpperCase() === 'AM') {
if (h === 12) h = 0;
} else {
if (h !== 12) h += 12;
}
return `${h.toString().padStart(2, '0')}:${minute}`;
}
// 示例：
// from12HourFormat('2:30 PM') → '14:30'
// from12HourFormat('12:05 AM') → '00:05'
// from12HourFormat('12:45 PM') → '12:45'
这个函数不处理空格/缩写（如 "2:30pm"、"2:30 p.m."），如需健壮性，先用正则统一清洗，或直接用 moment.js / date-fns 的 parse（但对纯时间场景属于重量解法）。
为什么不要用 new Date(timeStr) 解析 time 字符串？
new Date('14:30') 会返回一个无效日期（Invalid Date），因为 Date 构造函数需要完整日期信息（年月日）。强行传入会导致意外行为：
-
new Date('14:30').getHours()在某些浏览器返回当前日期的小时，不是 14 -
new Date('14:30').toISOString()报错或返回错误时间戳 - 即使拼上假日期（如
new Date('1970-01-01T' + timeStr)），也引入了时区风险（T后无 Z 或 ±hh:mm 默认按本地时区解释）
真正安全的做法是字符串切分或使用 Intl.DateTimeFormat 配合 { hour12: true } 做双向格式化，但要注意它依赖运行环境 locale 设置，不适合做确定性转换。
最轻量、最可控的方式，始终是手动字符串处理 —— 时间输入框的值结构简单、格式固定，没必要绕路进 Date API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
