本文介绍在html表单中，当用户选择入住日期后，如何通过javascript自动将退房日期设为入住日期的第二天，特别适配wordpress短代码小工具环境。
要实现在入住日期（Check-In）选择后，退房日期（Check-Out）自动更新为次日，关键在于：监听入住日期输入框的 change 事件，解析所选日期，计算加一天后的新日期，并以标准 YYYY-MM-DD 格式赋值给退房日期输入框。原问题中的代码存在多个技术错误：JavaScript 执行时机过早（DOM 未加载）、ID 引用未加引号、setElementById 方法不存在、字符串拼接误用（"indate + 1" 不是运算而是字面量），且混用了不兼容的 jQuery UI 示例逻辑。
以下是轻量、无依赖、纯原生 JavaScript 的可靠实现方案（无需 jQuery 或外部库，完美兼容 WordPress 短代码环境）：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
<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>
<p><input type="submit" value="Search"></p>
</form>
<script>
// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', function() {
const checkIn = document.getElementById('Check_In_Date');
const checkOut = document.getElementById('Check_Out_Date');
// 监听入住日期变化
checkIn.addEventListener('change', function() {
if (!this.value) return;
// 解析为 Date 对象
const date = new Date(this.value);
// 添加 1 天（注意：Date 对象月份从 0 开始，但 setDate 自动处理进位）
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');
const nextDay = `${year}-${month}-${day}`;
checkOut.value = nextDay;
// 可选：禁用退房日期手动修改（如需强约束）
// checkOut.setAttribute('readonly', 'readonly');
});
// 初始化：若已有默认入住日期，同步设置退房日期
if (checkIn.value) {
checkIn.dispatchEvent(new Event('change'));
}
});
</script>✅ 注意事项与最佳实践：
- 必须使用 DOMContentLoaded：确保脚本在 DOM 元素就绪后运行，避免 getElementById 返回 null；
- 日期计算用 setDate() 而非字符串拼接：new Date("2022-05-31").setDate(32) 会自动进位到 6 月 1 日，安全可靠；
- 格式化不可省略：padStart(2, '0') 保证月份/日期始终两位数，否则 2022-5-1 会被部分浏览器视为无效值；
- WordPress 短代码中嵌入：将上述完整代码（含 <script>）放入文本小工具或自定义短代码函数中即可生效；若主题已加载 jQuery，也可改用 jQuery 写法，但原生方案更轻量、无冲突风险；
- 用户体验增强建议：可添加 min 属性限制退房日期不能早于入住日（checkOut.min = checkIn.value），并在 change 中动态更新。
该方案简洁、健壮、零依赖，一次配置即可在任意现代浏览器及 WordPress 环境中稳定运行。
