本文介绍在html表单中，当用户选择入住日期后，如何通过javascript自动将退房日期设为入住日期的第二天，适用于wordpress短代码小工具等场景。
要实现“入住日期选择后，退房日期自动设为次日”的功能，关键在于监听入住日期输入框（zuojiankuohaophpcninput type="date">）的 change 事件，并在事件触发时动态计算并设置退房日期。原问题中的代码存在多处错误：JavaScript语法错误（如 document.setElementById 不存在）、字符串拼接误用（"indate + 1" 被当作字面量而非计算表达式）、未处理日期对象运算、且脚本执行时机早于DOM加载。
以下是纯原生JavaScript、无需jQuery依赖、兼容WordPress短代码环境的可靠实现方案：
✅ 正确实现（推荐）
<form method="get">
<p>
Check In Date Check Out Date<br>
<input type="date" name="checkin" id="Check_In_Date" required>
<input type="date" name="checkout" id="Check_Out_Date" required>
</p>
<p>
Adults:
<select name="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Children:
<select name="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</p>
<input type="submit" value="Search">
</form>
<script>
// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', function () {
const checkInInput = document.getElementById('Check_In_Date');
const checkOutInput = document.getElementById('Check_Out_Date');
// 设置最小可选日期（可选：防止用户选过去日期）
const today = new Date().toISOString().split('T')[0];
checkInInput.min = today;
// 监听入住日期变更
checkInInput.addEventListener('change', function () {
if (!this.value) return;
const checkInDate = new Date(this.value);
const checkOutDate = new Date(checkInDate);
checkOutDate.setDate(checkInDate.getDate() + 1); // 加1天
// 格式化为 YYYY-MM-DD（date input 所需格式）
const year = checkOutDate.getFullYear();
const month = String(checkOutDate.getMonth() + 1).padStart(2, '0');
const day = String(checkOutDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
checkOutInput.value = formattedDate;
checkOutInput.min = formattedDate; // 同时更新退房日期最小值
});
// 可选：若入住日期已有初始值，自动初始化退房日期
if (checkInInput.value) {
checkInInput.dispatchEvent(new Event('change'));
}
});
</script>⚠️ 注意事项
- 不要在 <script> 中使用 type="date/javascript"：该 MIME 类型无效，应使用 type="text/javascript" 或直接省略（HTML5 默认即 JavaScript）。
- ID 匹配必须严格一致：HTML 中 id="Check_In_Date" 与 JS 中 getElementById('Check_In_Date') 的字符串必须完全相同（区分大小写）。
- 日期计算必须基于 Date 对象：不能对字符串 "2022-05-16" 直接加 1；必须解析为 Date 实例后调用 setDate()。
- WordPress 短代码兼容性：将上述完整代码（含 <form> 和 <script>）放入文本小工具或自定义 HTML 块即可运行；若主题禁用内联脚本，建议将 JS 提取至子主题 functions.php 中用 wp_enqueue_script 加载。
- 无障碍与用户体验：建议为两个日期输入框添加 <label> 标签，并设置 required 属性提升表单健壮性。
✅ 总结
该方案不依赖 jQuery 或第三方库，轻量、标准、可维护，完美适配现代浏览器及 WordPress 环境。核心逻辑仅三步：监听变更 → 解析日期 → 计算并设置次日。如需扩展（如支持最小入住天数、节假日跳过、周末自动延至周一等），可在 change 回调中增强日期逻辑，保持结构清晰、职责单一。
