將90天添加到datepicker中選擇的當前日期時如何獲得正確的結束日期（月份更新不正確）

目標： 將 90 天添加到 datepicker 中選擇的當前日期

描述： 我想創建一個簡單的日期計算，用戶從日期選擇器中選擇一個日期，系統會自動添加 90 天并輸出 90 天后的日期。

到目前為止我所做的

1. 在 html 中創建了一個標準的日期選擇器，輸入型別=日期
2. 獲取今天的日期并在 datepicker 中顯示
3. 將 p 附加到 html 并輸出結束日期（ 90 天）=結束日期似乎用初始日期（今天的日期）正確計算

不作業：

• 當用戶在 datepicker 中選擇新日期時，結束日期計算不正確
• 當用戶回傳多個月（本月：Sept -> 用戶選擇July）時，輸出未正確添加月數

代碼

// select & create DOM elements
let datePickerField = document.querySelector("#datepicker");
let endContainer = document.querySelector('#dateEnd');
let p = document.createElement('p');

let startDate = new Date();          // create new Date object = default = todays date
let endDate = new Date();          // create end Date object = default = todays date



/** --------------------------------------------- Get initial date and set datepicker  --------------------------------------------------------------*/



// get number of days, months and year and turn into string.
// padstart fills empty sapce with a value. first value is the number of values and the second is the value.
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;                         // set datepicker to today's date 

/** Create a new paragraph and display last day to leave */

endDate = new Date(endDate.setDate(startDate.getDate()   90));           // takes days and convert to day in a month = 119 days, return in  ms from 1970
endDate = endDate.toDateString();                                      // turns date object with ms into readable string inFr 23 Sept 2022 format

p.innerHTML = "Your stay would end on the "   "<b>"   endDate   "</b>"   " if entered from today.";  // create new P and create new strong
endContainer.appendChild(p);                                                                        // append P to DIV



/* -------------------------------------------------- Get datepicker custom date  ------------------------------------------------------------------*/



datePickerField.addEventListener('input', function () { // listens to user action and activates when user selects a new date
    let newStartDate = new Date(datePickerField.value);                         // example: 01.09.2022
    let newEndDate = new Date();

    
    console.log("selected start date: "   newStartDate.toDateString());         // Fr Sept 01 2022
    console.log("day: "   newStartDate.getDate());                              // day: 01
    console.log("month: "   (newStartDate.getMonth()   1));                     // month: 9
    console.log("year: "   newStartDate.getFullYear());                         // year: 2022


    newEndDate = new Date(newEndDate.setDate(newStartDate.getDate()   90));     // gets milliseconds from start date   90 days
    console.log("new end date: "   newEndDate.toDateString());

    newStartDate = newStartDate.toDateString();   
    newEndDate = newEndDate.toDateString();         // turns date object with ms into readable string inFr 23 Sept 2022 format


    p.innerHTML = "You are entering the country on  "   "<b>"   newStartDate   "</b>"    " and need to leave by "   "<b>"   newEndDate   "</b>";

 });

uj5u.com熱心網友回復：

我認為您只需要更改以下幾行即可正確計算結束日期。首先將結束日期設定為新的開始日期，然后添加 90 天。

let newEndDate = new Date(newStartDate);
newEndDate.setDate(newEndDate.getDate()   90);

運行代碼片段試試：

let datePickerField = document.querySelector("#datepicker");
let endContainer = document.querySelector('#dateEnd');
let p = document.createElement('p');
let startDate = new Date();
let endDate = new Date();
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;   

endDate = new Date(endDate.setDate(startDate.getDate()   90));
endDate = endDate.toDateString();
p.innerHTML = "Your stay would end on the "   "<b>"   endDate   "</b>"   " if entered from today.";  // create new P and create new strong

endContainer.appendChild(p);                                                   

datePickerField.addEventListener('input', function () { 

    let newStartDate = new Date(datePickerField.value);                         
    
    let newEndDate = new Date(newStartDate);
    newEndDate.setDate(newEndDate.getDate()   90);
    
    newStartDate = newStartDate.toDateString();   
    newEndDate = newEndDate.toDateString();
    p.innerHTML = "You are entering the country on  "   "<b>"   newStartDate   "</b>"    " and need to leave by "   "<b>"   newEndDate   "</b>";

 });

<input id="datepicker" type="date">
<div id="dateEnd"></div>

標籤：javascript日期日期选择器天

上一篇：如何根據日期鍵值對字典進行排序

下一篇：無法在SpringData中實體化DTO投影