Adding two different dates using JavaScript

Question

Hello guys,

I am trying to do the following:

1- Get the value from the calendar the user picked. 2- Add five years to the value chosen. 3- subtract the Value + five years from the current date. 4 Display the result of (value + 5 years - the current date).

So far that is what I have tried, the result in milliseconds won't be added properly it is kind of adding two strings to each other which I am not looking to do so.

    let selectDate = document.getElementById('Calender').value;
    let exact = Date.parse(selectDate);
    let fiveYearsInMs = "157784760000";
    console.log(exact+fiveYearsInMs);

Ps: I am looking to use JavaScript only, no moment.js, or anything else

any help, please?

Adding a fixed number of milliseconds won't give exact results for all five year ranges - such a range could possibly contain none, one or two February 29th's. For higher marks look up `Date` object methods that get and set year values of a date. — traktor, Jun 13 '21 at 04:24

score 1 · Answer 1 · answered Jun 13 '21 at 04:06

1

You are close! But just have fiveYearsInMs as an integer, not a string.

let selectDate = "2021-06-13"
let exact = Date.parse(selectDate);
let fiveYearsInMs = 157784760000;
console.log(exact + fiveYearsInMs);

let futureDate = new Date(exact + fiveYearsInMs)
console.log(futureDate)

answered Jun 13 '21 at 04:06

Louys Patrice Bessette

33,375
6
36
64

"2021-06-13" is parsed as UTC, *fiveYearsInMs* is an estimate and unlikely to be accurate as it may encompass zero, one or two leap years. – RobG Jun 13 '21 at 23:26

Kinglish · Accepted Answer · 2021-06-14T05:42:30.103

Here is one method to add 5 years to a date. This method requires the input date to be a recognizable format, such as would come from a date-picker or date field from a database. It converts the incoming string into a date format - after which we rebuild the date string, adding 5 to the years.

 let fiveYears = 
 (d.getFullYear() + 5) + "-" +  // we get the year and add 5
 ("0" + (d.getMonth() + 1)).slice(-2) +"-"+  // we get the month (which is zero based so we need to add 1 - then we pad it with a leading zero and finally take the last 2 via slice()
 ("0" + d.getDate()).slice(-2); // we get the day and pad as mentioned above

document.querySelector('input').addEventListener('change', (e) => {
  doDate(e.target.value)
})

// this next function relies on the selectDate being a recognizable date format, which it definitely will be if it comes from a date text element like this example
const doDate = (selectDate) => {
  //let selectDate = document.getElementById('Calender').value;
  let d = new Date(selectDate)
  let fiveYears = 
     (d.getFullYear() + 5) + "-" +  
     ("0" + (d.getMonth() + 1)).slice(-2) +"-"+ 
     ("0" + d.getDate()).slice(-2);
     
  console.log(fiveYears) // date string
  console.log(new Date(fiveYears)) // date Object
  console.log(new Date(fiveYears).getTime()); //milliseconds
}

  // Archived: the following line (commented out) is not a reliable way to get the date, even though it will work for most modern browsers today, it's platform and browser dependent. 
  // I am leaving it here for posterity since this is how the answer was accepted
  // let fiveYears = selectDate.split("-").map((e, i) => i == 0 ? +e + 5 : e).join("/");

<input type='date' />

Code–only answers are not helpful. Entering 29/02/2020 gives 2025/02/29. Parsing of unsupported string formats is implementation dependent and to be discouraged. Date manipulation of strings needs careful checking. — RobG, Jun 13 '21 at 22:53
@RobG - too right and I appreciate getting called out on it. I revised my answer, cited some supporting articles and explained how it worked (and archived the previous solution). cheers — Kinglish, Jun 14 '21 at 05:43

Adding two different dates using JavaScript

2 Answers2