Goal: add 90 days to current date selected in datepicker

Description: I want to create a simple date calculation where a user selects from a date in a datepicker and the system automatically adds 90 days and outputs the date 90 days from now.

What I've done so far

1. created a standard datepicker in html with input type=date
2. get today's date and display in datepicker
3. Append p to html with output of end date ( 90 days) = end date seems to be calculated correctly with initial date (today's date)

Not working:

• when user selects new date in datepicker, the end date is not calculated correctly
• when user goes back multipl months (this month: Sept -> user selects July) the output doesn't add number of months correctly

Code

// 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>";

 });

CodePudding user response：

I think you only need to change the following lines to correctly calculate the end date. First set the end date to the new start date and then add 90 days to it.

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

Run the code snippet to try:

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>