HTML原生<input type="time">不支持自动联动，需用JavaScript监听input事件实现双向校验：开始时间变则更新结束时间min，结束时间变则检查是否早于开始时间并处理。
HTML原生<input type="time">不支持自动联动
浏览器原生的 <input type="time"> 之间没有内置依赖逻辑，设置开始时间后，结束时间不会自动更新最小值或禁用早于它的选项。你得手动监听、校验、同步——这是最常被误以为“浏览器该管”的地方。
常见错误现象：
用户把结束时间选成早于开始时间，表单仍能提交；或者用 min 属性设了初始值，但开始时间变更后 min 没更新，导致结束时间输入框变灰或无法操作。
- 必须用 JavaScript 监听
change或input事件（推荐input，实时响应） -
min属性只在初始化时生效，动态修改需通过 JS 赋值：endTimeInput.min = startTimeInput.value - 如果开始时间为空，结束时间的
min应清空（设为""），否则会沿用旧值，造成阻塞
如何用 JavaScript 实现双向联动校验
核心是两个输入框互相约束：开始时间变 → 更新结束时间的 min；结束时间变 → 检查是否合法，不合法则重置或提示。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给两个
<input type="time">分别加id，比如start-time和end-time - 监听双方的
input事件，避免只监听change导致延迟反馈 - 在开始时间更新时，直接设置
end-time.min = start-time.value；若start-time.value为空，记得设end-time.min = "" - 在结束时间更新时，检查
end-time.value < start-time.value，成立则可选择清空结束时间、或强制设为等于开始时间（视业务而定）
简短示例：
const start = document.getElementById('start-time');
const end = document.getElementById('end-time');
start.addEventListener('input', () => {
end.min = start.value || '';
});
end.addEventListener('input', () => {
if (start.value && end.value && end.value < start.value) {
end.value = start.value; // 强制对齐
}
});
移动端 Safari 对 min 的兼容性坑
iOS 15+ 之前，Safari 不支持 <input type="time"> 的 min / max 属性，设了也无效。即使现在支持，部分旧机型或微信 WebView 仍可能忽略。
这意味着仅靠 HTML 属性做约束，在 iOS 上大概率失效，必须配合 JS 校验 + 提示（比如 setCustomValidity()）。
- 不要省略 JS 校验，哪怕写了
min - 提交前务必用
checkValidity()主动触发验证 - 可用
end.setCustomValidity(end.value < start.value ? '结束时间不能早于开始时间' : '')做用户友好提示 - 注意：Safari 对
setCustomValidity的样式支持较弱，提示可能只在reportValidity()调用后浮现
要不要用第三方时间选择器？
如果你需要精确到分钟的区间高亮、跨天支持、键盘导航、无障碍（a11y）或日期+时间混合选择，原生 <input type="time"> 就不够用了。
但若只是简单同一天内的开始/结束时间选择，且兼容性要求覆盖到 iOS 14+ 和主流安卓，纯 HTML + 轻量 JS 足够稳定——引入 flatpickr 或 dayjs 反而增加包体积和维护成本。
容易被忽略的一点：所有联动逻辑必须在 DOM 加载完成后执行，否则 getElementById 可能返回 null；用 DOMContentLoaded 包一层最稳妥。
