本文详解如何通过原生 javascript 动态设置退房日期为入住日期的第二天，兼容 wordpress 短代码环境，无需 jquery 依赖，修复常见 dom 操作与日期计算错误。
在酒店预订表单中，让“退房日期”默认比“入住日期”晚一天，是提升用户体验的关键细节。但直接拼接字符串（如 "indate + 1"）或误用 DOM 方法（如 setElementById）会导致脚本失效——这正是原始代码失败的根本原因：document.setElementById 并不存在，且日期加减必须基于 Date 对象运算，而非字符串操作。
以下为纯原生、零依赖、WordPress 友好的解决方案：
✅ 正确实现步骤
- 确保 HTML 结构规范：为两个日期输入框设置唯一 id，并移除无效的 type="date/javascript"（应为 text/javascript 或省略）；
- 监听入住日期变更：使用 input 或 change 事件实时响应用户选择；
- 安全计算次日日期：将字符串日期转为 Date 对象，setDate(getDate() + 1)，再格式化为 YYYY-MM-DD；
- 设置退房日期值：仅当入住日期有效时才更新，避免空值或非法日期导致异常。
✅ 完整可运行代码（适配 WordPress 短代码）
<form method="get">
<p>
<strong>Check In Date:</strong>
<input type="date" name="checkin" id="Check_In_Date" value="2022-05-16">
<strong>Check Out Date:</strong>
<input type="date" name="checkout" id="Check_Out_Date" value="">
</p>
<p>
<label>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>
</label>
<label>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>
</label>
</p>
<input type="submit" value="Search">
</form>
<script>
// 等待 DOM 加载完成
document.addEventListener('DOMContentLoaded', function() {
const checkIn = document.getElementById('Check_In_Date');
const checkOut = document.getElementById('Check_Out_Date');
// 初始化：若已有入住日期，则自动设置退房为次日
if (checkIn.value) {
setNextDay(checkIn.value);
}
// 监听入住日期变化
checkIn.addEventListener('input', function() {
if (this.value) {
setNextDay(this.value);
} else {
checkOut.value = ''; // 清空退房日期
}
});
// 核心函数：计算并设置次日
function setNextDay(dateString) {
const date = new Date(dateString);
if (isNaN(date.getTime())) return; // 防御非法日期
date.setDate(date.getDate() + 1);
// 格式化为 YYYY-MM-DD（关键：补零）
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
checkOut.value = `${year}-${month}-${day}`;
}
});
</script>⚠️ 注意事项（WordPress 环境特别提示）
- 脚本位置：将 <script> 放在表单下方（或使用 DOMContentLoaded），避免因 DOM 未加载导致 getElementById 返回 null；
- 短代码兼容性：WordPress 默认可能过滤 <script> 标签。若失效，请改用 wp_add_inline_script() 在主题 functions.php 中注入，或使用支持 JS 的插件（如 “Insert Headers and Footers”）；
- 浏览器兼容性：<input type="date"> 在 Safari 旧版本中支持有限，生产环境建议搭配轻量级日期库（如 flatpickr）增强兼容性；
- 用户体验优化：可为退房日期添加 min 属性（checkOut.min = checkIn.value），防止用户手动选择早于入住的日期。
该方案简洁、健壮、无第三方依赖，完美解决原始代码中的语法错误、逻辑缺陷与执行时机问题，可直接集成至 WordPress 短代码小工具中稳定运行。
