必须用两个独立的 type="date" 或 type="time" 输入框配合 JavaScript 联动校验，因原生 HTML 不支持 daterange/time-range 类型，且 min/max 仅单向约束、无法表达“结束≥开始”的双向依赖关系。
原生 HTML 没有 type="daterange" 或 type="time-range"，必须用两个独立的 <input> 控件 + JavaScript 联动校验，否则用户能随意输入非法区间（比如结束早于开始）。
怎么写日期范围的 HTML 结构
用两个 <input type="date">，分别标记起止，不加任何 JS 也能渲染出系统日历控件，但值之间毫无约束：
<label for="start-date">开始日期:</label> <input type="date" id="start-date" name="start_date"> <label for="end-date">结束日期:</label> <input type="date" id="end-date" name="end_date">
- 必须为每个
input设置唯一id和name，否则 JS 获取不到或表单提交字段名冲突 - 不要设
value为非YYYY-MM-DD格式字符串（如带时间的 ISO 字符串），否则值会被清空 - 移动端 Safari（≤ iOS 15.5）对动态
min更新响应滞后，需手动触发input.dispatchEvent(new Event('input'))
为什么 min/max 属性不能替代 JS 联动
min 和 max 只控制单个输入框的可选范围，无法表达“结束 ≥ 开始”这种双向依赖关系：
- 设
<input type="date" min="2024-01-01">，只能防止选 2023 年，但无法阻止用户先选2024-12-31再选2024-01-01作为结束 -
min值必须是严格YYYY-MM-DD字符串，传new Date()或"2024-01-01T00:00"会失效 - 浏览器不会自动监听另一个输入框变化来更新
min，必须靠 JS 绑定change事件手动同步
时间范围（type="time"）的写法和坑点
结构和日期类似，但时间格式更敏感，且部分浏览器（如旧版 Safari）对 step 和 min/max 支持不一致：
立即学习“前端免费学习笔记（深入）”；
<label for="start-time">开始时间:</label> <input type="time" id="start-time" name="start_time" step="900"> <label for="end-time">结束时间:</label> <input type="time" id="end-time" name="end_time" step="900">
-
step="900"表示 15 分钟一档（900 秒），若设step="60"（默认），用户仍可能输14:01这种非整点时间 - 时间值格式固定为
HH:MM（24 小时制），value="2:30"无效，必须写"02:30" - 用户未选择时，
input.value是空字符串""，不是null或undefined，校验时要用!input.value - Chrome 和 Edge 支持秒数（
HH:MM:SS），但需显式设step="1"；Safari 不支持，强行填秒会被截断
联动逻辑里最容易被忽略的细节
真正让范围“稳住”的不是结构，而是事件绑定时机和边界处理方式：
- 起始框
change后，只更新结束框的min，**不重置其当前值**——否则用户刚选好结束时间，切回修改开始时间，结束时间就被清空了 - 结束框
change后，必须立刻比对：if (end.value && start.value && end.value ，仅靠 <code>min无法拦截用户粘贴或手动输入非法值 - 报错后清空
end.value时，记得再调一次end.dispatchEvent(new Event('input'))，否则某些浏览器 UI 不刷新，看起来像没生效 - 如果页面允许“无结束时间”（即单边范围），结束框的
min应设为空字符串而非start.value，否则用户连空值都选不了
