如何实现入住日期变更后自动设置退房日期为次日

本文介绍在 html 表单中，当用户选择入住日期后，如何通过 javascript 自动将退房日期设为入住日期的第二天，特别适配 wordpress 短代码小 工具 环境。

要实现在入住日期（Check-In）选择后，退房日期（Check-Out）自动更新为次日，关键在于：监听入住日期输入框的 change 事件，解析所选日期，计算加一天后的新日期，并以标准 YYYY-MM-DD 格式赋值给退房日期输入框。原问题中的代码存在多个技术错误：JavaScript 执行时机过早（DOM 未加载）、ID 引用未加引号、setElementById 方法不存在、字符串拼接误用（”indate + 1″ 不是运算而是字面量），且混用了不兼容的 jQuery UI 示例逻辑。

以下是轻量、无依赖、纯原生 JavaScript 的可靠实现方案（无需 jQuery 或外部库，完美兼容 WordPress 短代码环境）：

   
          Check In Date                    Check Out Date                                                  
                                 
    
     Adults:             1       2       3       4           Children:             0       1       2       3        
    
 
  

✅ 注意事项与最佳实践：

• 必须使用 DOMContentLoaded：确保脚本在 DOM 元素就绪后运行，避免 getElementById 返回 null；
• 日期计算用 setDate() 而非字符串拼接：new Date(“2022-05-31”).setDate(32) 会自动进位到 6 月 1 日，安全可靠；
• 格式化不可省略 ：padStart(2, ‘0’) 保证月份 / 日期始终两位数，否则 2022-5-1 会被部分 浏览器 视为无效值；
• WordPress 短代码中嵌入：将上述完整代码（含
• 用户体验增强建议：可添加 min 属性限制退房日期不能早于入住日（checkOut.min = checkIn.value），并在 change 中动态更新。

该方案简洁、健壮、零依赖，一次配置即可在任意现代浏览器及 WordPress 环境中稳定运行。