datetime-local 不显示 AM/PM 是因 HTML5 规范强制要求 ISO 8601 格式（yyyy-MM-ddThh:mm），浏览器原生控件仅支持 24 小时制，且 step/pattern/locale 等属性无法改变其显示格式；需用 JS 格式化（如 toLocaleTimeString 配合 hour12: true）实现 AM/PM 展示，输入则应改用分离式控件或自定义组件。
input[type="datetime-local"] 本身不支持直接显示或输入“上午/下午”（AM/PM）格式，它强制使用 24 小时制（HH:mm），且没有内置的 ampm 标识符。
为什么 datetime-local 不显示 AM/PM？
HTML5 规范明确要求 datetime-local 的值格式为 yyyy-MM-ddThh:mm（例如 2024-06-15T14:30），其中 hh 是 00–23 的 24 小时制数字。浏览器 UI（如 Chrome、Edge 的原生日期时间选择器）一律按此渲染，不提供 AM/PM 切换控件或显示。
常见误解是以为加 step、pattern 或 locale 设置能触发 AM/PM —— 实际上这些对原生控件的显示格式无效。
想用 AM/PM，只能放弃 datetime-local
若业务必须暴露 AM/PM（比如面向北美用户表单），应改用分离式输入或自定义组件：
立即学习“前端免费学习笔记（深入）”；
- 用两个
input[type="date"]+input[type="time"]，再配合 JS 将time的format设为 12 小时制（但注意：input[type="time"]的value仍是 24 小时制字符串，UI 是否显示 AM/PM 取决于系统 locale，不可控） - 用
input[type="text"]+ JavaScript 库（如flatpickr、dayjs+ 自定义格式化）实现带 AM/PM 的可编辑字段 - 服务端接收后统一转为 ISO 格式存储，前端展示时用
Intl.DateTimeFormat格式化输出（仅用于显示，不用于输入）
toLocaleTimeString() 是显示 AM/PM 的可靠方式
真正可控、跨浏览器一致的 AM/PM 显示，靠 JS 格式化而非 HTML 属性：
const date = new Date('2024-06-15T14:30');
console.log(date.toLocaleTimeString('en-US', {
hour12: true,
hour: '2-digit',
minute: '2-digit'
})); // → "2:30 PM"
关键参数必须显式指定 hour12: true，否则部分 locale（如 en-GB）默认仍用 24 小时制。
注意：这个方法只适用于「展示」，不能回填到 datetime-local 输入框——因为它的 value 接收的只能是 ISO 字符串，填入 "2:30 PM" 会导致 valueAsDate 为 null。
AM/PM 的核心矛盾在于：HTML 原生控件追求标准化（ISO），而本地化显示依赖运行时环境与 JS 控制。强行在 input 上做 AM/PM 支持，大概率导致值解析失败或兼容性断裂。
