HTML 房屋租赁表单怎么实现租期起止时间的联动选择-H5教程-PHP中文网

租期起止时间联动的关键是结束日期不得早于开始日期且默认延后12个月：通过html的input type="date"实现语义化输入，javascript监听开始日期变化，安全计算加12个月后的结束日期并动态设置enddate的min属性与value值。

html 房屋租赁表单怎么实现租期起止时间的联动选择

租期起止时间联动的关键是：让“结束日期”不能早于“开始日期”，且通常默认结束日期为开始日期之后的固定周期（如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年）：

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

获取用户选择的开始日期（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)     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)，实现动态计算。