为DatePicker选中日期加90天后，如何获取正确结束日期（月份更新异常）

目标 #

为DatePicker中选中的日期添加90天

描述 #

实现简单日期计算功能：用户在DatePicker选择日期后，系统自动计算该日期加90天后的结果并输出。

已完成操作 #

• 使用HTML的input type=date创建标准DatePicker
• 获取当前日期并显示在DatePicker中
• 通过<p>标签输出初始日期（当前日期）加90天的结果，该初始计算正确

现存问题 #

• 用户选择新日期后，结束日期计算结果错误
• 跨多月选择日期时（如从9月选到7月），月份更新出现异常

现有代码 #

// 选择并创建DOM元素
let datePickerField = document.querySelector("#datepicker");
let endContainer = document.querySelector('#dateEnd');
let p = document.createElement('p');

let startDate = new Date();          // 创建默认日期对象（当前日期）
let endDate = new Date();          // 创建结束日期对象（初始为当前日期）

/** --------------------------------------------- 初始化日期并设置DatePicker  --------------------------------------------------------------*/

// 获取日、月、年并转为字符串，padStart补全前导0
let dd = startDate.getDate().toString().padStart(2, 0); 
let mm = (startDate.getMonth() + 1).toString().padStart(2, 0);
let yyyy = startDate.getFullYear().toString();

datePickerField.value = yyyy + '-' + mm + '-' + dd;                         // 设置DatePicker为当前日期

/** 创建段落并显示初始停留截止日期 */

endDate = new Date(endDate.setDate(startDate.getDate() + 90));           // 计算当前日期加90天
endDate = endDate.toDateString();                                      // 转为可读日期字符串

p.innerHTML = "如果今天入境，你的停留截止日期是 <b>" + endDate + "</b>";  
endContainer.appendChild(p);                                                                        // 将段落添加到容器中

/* -------------------------------------------------- 监听DatePicker选择事件  ------------------------------------------------------------------*/

datePickerField.addEventListener('input', function () { // 监听用户选择新日期的动作
    let newStartDate = new Date(datePickerField.value);                         // 获取选中的日期
    let newEndDate = new Date();

    
    console.log("选中的起始日期: " + newStartDate.toDateString());         
    console.log("日: " + newStartDate.getDate());                              
    console.log("月: " + (newStartDate.getMonth() + 1));                    
    console.log("年: " + newStartDate.getFullYear());                        

    newEndDate = new Date(newEndDate.setDate(newStartDate.getDate() + 90));     // 错误的计算方式：基于当前日期修改日份
    console.log("计算后的结束日期: " + newEndDate.toDateString());

    newStartDate = newStartDate.toDateString();   
    newEndDate = newEndDate.toDateString();        

    p.innerHTML = "你入境的日期是  <b>" + newStartDate + "</b>，需要在 <b>" + newEndDate + "</b> 前离境";

 });

问题原因 #

核心错误在于监听输入事件时的日期计算逻辑：newEndDate是基于当前系统日期创建的对象，调用setDate(newStartDate.getDate() + 90)仅修改了该对象的日份，而非基于用户选中的起始日期进行整体计算，导致跨月、跨年场景下计算完全错误。

修复方案 #

直接基于用户选中的起始日期进行计算，有两种可靠实现方式：

方式一：复制起始日期后添加90天 #

datePickerField.addEventListener('input', function () {
    let newStartDate = new Date(datePickerField.value);
    // 复制选中的日期对象，避免修改原数据
    let newEndDate = new Date(newStartDate);
    // 在复制的日期上直接添加90天，Date对象会自动处理月、年的进位
    newEndDate.setDate(newEndDate.getDate() + 90);

    const startStr = newStartDate.toDateString();   
    const endStr = newEndDate.toDateString();

    p.innerHTML = `你入境的日期是  <b>${startStr}</b>，需要在 <b>${endStr}</b> 前离境`;
});

方式二：通过时间戳计算 #

datePickerField.addEventListener('input', function () {
    let newStartDate = new Date(datePickerField.value);
    // 一天的毫秒数：24小时×60分钟×60秒×1000毫秒 = 86400000
    const oneDayMs = 24 * 60 * 60 * 1000;
    // 基于起始日期的时间戳，加上90天的毫秒数
    let newEndDate = new Date(newStartDate.getTime() + 90 * oneDayMs);

    const startStr = newStartDate.toDateString();   
    const endStr = newEndDate.toDateString();

    p.innerHTML = `你入境的日期是  <b>${startStr}</b>，需要在 <b>${endStr}</b> 前离境`;
});

初始化代码优化（可选） #

初始化时的结束日期计算也可以简化，避免冗余操作：

// 初始化结束日期
let endDate = new Date(startDate);
endDate.setDate(endDate.getDate() + 90);
const endStr = endDate.toDateString();
p.innerHTML = `如果今天入境，你的停留截止日期是 <b>${endStr}</b>`;
endContainer.appendChild(p);

内容的提问来源于stack exchange，提问作者ninjaninh