必须用两个日期输入框加JavaScript联动校验，核心是动态设置end.min=start.value并监听input和blur事件实时校验，同时服务端须二次验证。
原生 <input type="date"> 不支持范围选择，必须用两个控件 + JS 联动校验，否则用户能轻易提交 "2024-05-10" 到 "2024-05-01" 这类逆序日期。
怎么让结束日期不能早于开始日期
核心是双向绑定 min 属性和实时校验，不是只设一次就完事。
- 起始
<input>的min可设为空或当前日期（如min="2026-09-21"），防止选过去 - 结束
<input>的min必须动态同步起始值：endInput.min = startInput.value - 监听起始框的
input事件（不是change）更新结束框min，避免键盘输入后没响应 - 监听结束框的
input和blur事件：若endInput.value < startInput.value，立即调用endInput.setCustomValidity("结束日期不能早于开始日期") - 每次校验通过后，必须调用
endInput.setCustomValidity("")清空状态，否则后续提交永远失败
为什么只监听 change 会漏掉校验
用户用键盘输入日期后直接失焦、或在某些 Android 厂商浏览器中点选日历不触发 change，input 事件才是更可靠的实时捕获方式。
-
change只在元素失去焦点且值改变时触发，中间修改过程不可见 -
input在每次输入/选择后立刻触发，包括键盘输入、日历点击、粘贴等所有变更 - 但
input无法捕获“打开日历后不选直接关闭”的场景，所以blur是必要兜底 - 不要只靠
min属性——Safari 15 及更早版本中，它只影响日历滚动范围，用户仍可键盘输入非法值
表格里多个日期范围对怎么处理
每组起止控件必须独立管理，不能共用变量或事件处理器，否则交叉干扰。
立即学习“前端免费学习笔记（深入）”；
- 给每组加唯一 data 属性，比如
data-group="row-1"，事件委托时按组匹配 - 避免用全局变量存
startValue，改用event.target.closest("tr").querySelector(".start-date")动态查找同组起始框 - 批量初始化时，循环每个
.date-range-group容器，为内部两个input绑定各自事件 - 注意 iOS Safari 中，
input事件对日历选择的触发不稳定，blur必须保留
最易被忽略的是：服务端收到的只是两个字符串，start=2026-09-21、end=2026-09-15，前端校验再严，后端也得重新解析成 Date 对象比大小——字符串字典序比较（如 "2026-09-15" < "2026-09-21"）虽可行，但一旦格式出错（如多空格、斜杠），就全崩了。
