需双向动态联动min/max并实时校验：开始日期变化时更新结束日期的min值，两输入框均监听input事件调用统一函数enforceDateRange，确保start≤end，且服务端必须二次校验。
HTML <input type="date"> 的 min 和 max 怎么联动设置？
原生 <input type="date"> 不会自动同步两个输入框的限制，必须手动绑定逻辑。比如结束日期不能早于开始日期，关键不是靠单个 min 属性硬写死，而是监听开始日期变化后动态改结束输入框的 min 值。
常见错误是只设一次 min，页面加载完就不再更新，导致用户改了开始日期后，结束日期仍能选更早的时间。
- 开始日期
<input id="start">改变时，立即执行：document.getElementById('end').min = event.target.value - 结束日期输入框也要监听
input或change，检查是否小于当前min，若小于则清空或重置为min - 注意：IE 不支持
type="date"，min/max在 Safari 14.1+ 才有完整 UI 限制（旧版仅校验不阻止输入）
用 JavaScript 防止时间范围冲突的最小可行逻辑
“防冲突”本质是保证 start ≤ end，但用户操作顺序不确定——可能先填结束、再改开始，也可能反过来。不能只做单向校验。
推荐用一个统一函数处理双向约束，例如：
立即学习“前端免费学习笔记（深入）”；
function enforceDateRange() {
const start = document.getElementById('start').value;
const end = document.getElementById('end').value;
if (start && end && new Date(start) > new Date(end)) {
document.getElementById('end').value = start;
}
}
这个函数应在两个输入框的 input 事件中都调用，而不是只在 change 里——否则用户拖动日历控件选错时间时，页面不会即时纠正。
- 别用
blur，失去焦点才校验太晚，体验割裂 - 如果允许空值，需先判断
value是否非空再转Date，否则new Date('')得到Invalid Date，比较结果不可靠 - 避免在函数里反复读写 DOM，可缓存元素引用提升性能
为什么用 input 事件比 change 更合适？
change 只在输入完成（失焦或回车）后触发，而 input 在每次值变更时就触发，包括日历控件点选、手动输入、粘贴等所有场景。
实测发现：Safari 和 Chrome 点击原生日历弹窗选日期时，change 会延迟触发（有时甚至不触发），但 input 是即时的。
- 绑定方式：
el.addEventListener('input', enforceDateRange) - 不需要节流——日期输入频率极低，没必要加
setTimeout或debounce - 移动端 iOS 的日期选择器在确认前可能多次触发
input，但只要逻辑是幂等的（比如只在违反约束时修正），就没问题
服务端必须二次校验，前端限制只是辅助
所有前端限制都能被绕过：禁用 JS、直接修改 DOM、用 curl 提交非法参数……所以 start ≤ end 必须在后端接口里重新验证。
常见疏漏是只校验格式（如是否为合法 ISO 日期字符串），却没校验业务逻辑关系。
- Node.js Express 示例：
if (new Date(req.body.start) > new Date(req.body.end)) return res.status(400).json({ error: 'end must be after start' }) - PHP 中注意
strtotime()对空字符串返回-1，需先判空 - 数据库写入前也建议再查一次，避免并发写入导致的竞态（比如 A 请求刚读出数据，B 请求已改写，A 接着写入旧值）
最易被忽略的是时区处理——前端 input[type=date] 值始终是本地时区的 YYYY-MM-DD，但后端解析时若按 UTC 解析，可能造成一天偏差。统一用 UTC 存储、展示时再转换，或前后端约定全部按客户端本地日期处理（不带时间部分）。
