租期起止时间联动的关键是结束日期不得早于开始日期且默认延后12个月：通过HTML的input type="date"实现语义化输入，JavaScript监听开始日期变化，安全计算加12个月后的结束日期并动态设置endDate的min属性与value值。
租期起止时间联动的关键是：让“结束日期”不能早于“开始日期”，且通常默认结束日期为开始日期之后的固定周期（如12个月）。实现方式以 HTML + JavaScript 为主，无需后端即可完成基础校验与自动填充。
1. 基础 HTML 结构：两个日期输入框
使用原生 input type="date"，确保语义清晰、移动端友好，并设置最小日期约束：
<label>租期开始日期：</label><br><input type="date" id="startDate" name="start_date"><br><br><label>租期结束日期：</label><br><input type="date" id="endDate" name="end_date" min="">
注意：endDate 的 min 属性需动态更新，初始可为空或设为今天，后续由 JS 控制。
2. JavaScript 实现日期联动逻辑
监听开始日期变化，自动计算并设置结束日期最小值和默认值（例如租1年）：
立即学习“前端免费学习笔记（深入）”；
- 获取用户选择的开始日期（Date 对象）
- 加12个月得到推荐结束日期（注意月份进位，避免 1月+12=13月错误）
- 将该日期设为 endDate 的 min 和 value（若当前未填写）
- 若用户已手动选过结束日期，且新开始日期晚于它，则重置结束日期为推荐值
示例代码（含月份安全计算）：
const startDate = document.getElementById('startDate');<br>const endDate = document.getElementById('endDate');<br><br>startDate.addEventListener('change', () => {<br> if (!startDate.value) return;<br> const start = new Date(startDate.value);<br> const end = new Date(start);<br> end.setMonth(end.getMonth() + 12); // 安全加12个月<br> <br> // 格式化为 YYYY-MM-DD 字符串（input date 所需格式）<br> const formattedEnd = end.toISOString().split('T')[0];<br> <br> // 更新 min 和 value（仅当 endDate 为空或小于 start 时）<br> if (!endDate.value || new Date(endDate.value) < start) {<br> endDate.min = formattedEnd;<br> endDate.value = formattedEnd;<br> } else {<br> endDate.min = startDate.value; // 至少不能早于开始日<br> }<br>});
3. 增强体验：可选租期时长下拉切换
若支持 6个月 / 12个月 / 24个月等灵活租期，可在开始日期旁加一个 select：
<label>租期长度：</label><br><select id="leaseTerm"><br> <option value="6">6个月</option><br> <option value="12" selected>12个月</option><br> <option value="24">24个月</option><br></select>
然后在 change 事件中读取 select 值，替换 end.setMonth(... + 12) 为 + parseInt(leaseTerm.value)，实现动态计算。
4. 补充建议：兼容性与提示
- 添加 required 属性强制填写，配合 title 或旁边文字提示“结束日期不得早于开始日期”
- 移动端 Safari 对 input[date] 支持较弱，可考虑用轻量级日期库（如 flatpickr）增强体验，但非必需
- 服务端务必再次校验（前端限制可被绕过），确保 end ≥ start
不复杂但容易忽略：日期加减要用 Date 对象方法，别直接拼字符串；min 属性影响的是可选范围，不是默认值，value 才决定显示内容。
