min/max仅约束单个日期字段，无法自动联动；需监听change事件动态更新另一字段的min/max，并用date对象比较确保准确性，服务端仍须校验。
用 min 和 max 属性限制单个日期输入范围
浏览器原生支持对 <input type="date"> 设置 min 与 max，能阻止用户选择超出范围的日期（如结束日期早于开始日期）。
但注意：这两个属性只约束单个字段，无法自动联动。比如你设了 start 的 min="2026-08-19"，end 的 min="2026-08-19"，仍可能提交 start=2026-08-25、end=2026-08-20 这种倒置组合。
-
min和max值必须是YYYY-MM-DD格式字符串，不能是相对时间（如"today"） - 设置后，日期选择器会禁用不可选日期，但用户仍可通过手动输入绕过（例如直接键入
2025-01-01） - 服务端收到值后，仍需独立校验逻辑，不能信任前端
min/max
监听 change 或 input 事件做实时联动校验
要真正防止“开始日期 > 结束日期”，必须在两个字段间建立响应关系。推荐监听 change（用户确认选择后触发）或 input（含手动输入）事件，动态更新另一个字段的 min/max。
示例逻辑：
const start = document.getElementById('start');
const end = document.getElementById('end');
start.addEventListener('change', () => {
if (start.value) {
end.min = start.value; // 确保结束日期不早于开始
}
});
end.addEventListener('change', () => {
if (end.value) {
start.max = end.value; // 确保开始日期不晚于结束
}
});
- 仅靠设置
min/max不会自动清空非法值，需额外调用setCustomValidity()并触发reportValidity() - 如果用户先填
end再填start，需在start的change中补做end.min = start.value，否则联动断裂 - 移动端 Safari 对
input事件支持不稳定，change更可靠
提交前用 JavaScript 手动比对两个日期字符串
HTML5 的 type="date" 输入框返回的值始终是 YYYY-MM-DD 字符串，可直接用于字典序比较——前提是格式合法且已通过浏览器基础校验。
但要注意：new Date("2026-08-19") 与 new Date("2026-08-20") 比较更安全，因为字符串比较在年份跨世纪时可能出错（如 "2001-12-31" > "2026-01-01" 成立），而实际日期对象不会。
- 优先用
new Date(dateStr)构造日期对象，再用getTime()比较毫秒数 - 构造失败时（如
new Date("invalid")返回Invalid Date），需先检查!isNaN(d.getTime()) - 避免仅用
dateStr1 ，它在月份/日期位数不一致时（如用户手输 <code>2026-8-19）会失效
服务端必须重新验证日期区间逻辑
前端所有联动和提示都可被绕过：用户禁用 JS、修改 DOM、用 curl 直接 POST 数据。服务端收到 start 和 end 后，必须独立执行以下步骤：
- 用正则
/^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/初筛格式 - 用
new Date(str)构造对象，并确认toISOString().slice(0,10) === str，排除2026-02-30这类非法日期 - 比较两个合法日期对象的
getTime()，确保start - 若业务要求“至少间隔 N 天”，也必须在此处计算并拒绝
最容易被忽略的是：前端看似严谨的联动，掩盖了服务端仍需完整重做一遍日期解析与语义校验的事实——哪怕只差一个 toISOString() 比对，就可能放过 2026-02-30 这种“格式对、语义错”的输入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
