HTML原生date输入框不支持动态日期差约束，必须用JavaScript监听change事件计算毫秒差并校验天数，推荐设为“至少30天”，同时需处理时区、清空重填、服务端二次校验等边界情况。
HTML原生无法直接限制“选满三十天”
原生 <input type="date"> 只支持 min 和 max 属性，用于限制单个日期的范围（比如不能早于今天、不能晚于明年），但不支持「起止日期差必须恰好/至少/至多30天」这类动态区间约束。浏览器没这个逻辑能力，必须靠 JavaScript 补足。
用 JavaScript 监听 change 事件校验日期差
核心思路：监听两个日期输入框（startDate 和 endDate）的 change 事件，计算毫秒差再换算成天数，不满足 30 天就重置或报错。
注意点：
- 日期字符串需先转为
Date对象，否则"2024-05-01" - "2024-04-01"会得NaN - 用
Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24))算整数天数（向下取整，避免时区导致小数） - 推荐设为「至少30天」而非「恰好30天」，更符合实际业务（如请假、租期）
<input type="date" id="startDate">
<input type="date" id="endDate">
<p><script>
const start = document.getElementById('startDate');
const end = document.getElementById('endDate');</p><p>function checkDateRange() {
if (!start.value || !end.value) return;
const s = new Date(start.value);
const e = new Date(end.value);
const days = Math.floor((e - s) / (1000 <em> 60 </em> 60 * 24));
if (days < 30) {
alert('结束日期必须比开始日期至少晚30天');
end.value = '';
}
}</p><p>start.addEventListener('change', checkDateRange);
end.addEventListener('change', checkDateRange);
</script></p>为什么不用 setAttribute('min') 动态设 endDate 的最小值？
可以设，但有明显缺陷：
立即学习“前端免费学习笔记（深入）”；
- 用户先填
endDate再填startDate时，min还没更新，校验失效 -
min只禁用选择，不阻止手动输入或粘贴非法值（比如粘贴一个更早的日期） - 移动端 date picker 不一定实时响应
min变更，体验不一致
所以 min 可作为辅助（提升 UX），但不可替代 JavaScript 校验。
兼容性与边界情况要手动兜底
真实场景中容易漏掉这些：
- 用户清空任一输入框后又重新填写，需重新触发校验（上面示例已覆盖）
- 时区问题：若用户机器时区为 UTC+9，
new Date('2024-05-01')实际是 UTC 时间 2024-04-30 15:00，导致天数偏差 —— 解决办法是统一用YYYY-MM-DD字符串解析，或强制转为 UTC 日始：new Date(dateStr + 'T00:00:00Z') - 服务端必须重复校验 —— 前端限制可被绕过，
if (endDate - startDate < 30 * 24 * 3600 * 1000)这类判断不能少
最麻烦的其实是用户想选「30天整」却因时区跨了29或31天显示，这时候别只依赖前端提示，得在 UI 上明确写「以北京时间为准」或自动对齐到当日零点。
