Why won't JavaScript code calculate months between two HTML date time inputs?

Question

I'm trying to calculate the number of months between two HTML date time inputs.

This means the expected result is when the user selects 7/21/21 from the dropdown calendar as a start date and 8/21/21 as an end date then it would be one month.

My actual results are not displayed on the screen.

I didn't get any error messages so I don't know what to fix.

I tried calculating the month difference between two dates by using Date.parse().value on the start date (movein-input) and the end date (moveout-input) and calculating the time apart in milliseconds(ms), minute, hour, day, month, year, years, months, days, and hours but it did work. I found the idea on youtube (https://www.youtube.com/watch?v=Q3oiSwdGAq8) and w3schools (https://www.w3schools.com/jsref/jsref_parse.asp). W3schools said when you display a date object in HTML, it is automatically converted to a string so I thought I could use the html date input in Date.Parse().value.

This is my JavaScript code

function calculatePrice() {
  let d1 = document.getElementById("movein-input").value;
  let d2 = document.getElementById("moveout-input").value;

  let msBetweenD1And1970 = Date.parse(d1);
  let msBetweenD2And1970 = Date.parse(d2);
  let timeInMs = msBetweenD2And1970-msBetweenD1And1970;

  let ms = timeInMs;
  let second = 1000;
  let minute = second*60;
  let hour = minute*60;
  let day = hour*24;
  let month = day*30;
  let year = day*365;

  let years = Math.round(ms/year);
  let months = years*12;


  var t1 = "That is : "+months;

  document.getElementById("m").innerHTML=t1
}

I also have the html code

<h2><span id="m">$</span></h2>

Calculate price is in the button

        <button onclick="calculatePrice()">Enter</button>

Also a small JS note: do not use `.innerHTML` if you're setting text. Use `.textContent` — Mike 'Pomax' Kamermans, Jul 20 '21 at 15:29
how is calculatePrice called? Is there an error in the console? What happens? — epascarello, Jul 20 '21 at 15:32
Note that if `movein-input` is an ``, this should be fine. If it's ``, you may have issues. See [Why does Date.parse() return incorrect results?](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — Heretic Monkey, Jul 20 '21 at 15:33
It certainly is, so just comment with that instead next time. The [code of conduct](/conduct) was added a while back exactly in the hopes to prevent these kinds of comments. Instead of telling someone their choice in website was a mistake, leaving them to feel bad about doing what any beginner would do, tell them why, and what you'd recommend they use instead. — Mike 'Pomax' Kamermans, Jul 20 '21 at 15:33
@epascarello calculatePrice is called in the button. I've pasted it to the question. — skipoppop, Jul 20 '21 at 15:39
See [*Difference between two dates in years, months, days in JavaScript*](https://stackoverflow.com/questions/17732897/difference-between-two-dates-in-years-months-days-in-javascript?r=SearchResults&s=1|277.3388). — RobG, Jul 21 '21 at 10:04

Kinglish · Accepted Answer · 2021-07-20T15:37:50.777

You were multiplying when you needed to be dividing.

let months = Math.round(ms / 1000 / 60 / 60 / 24 / 30)

function calculatePrice() {
  let d1 = document.getElementById("movein-input").value;
  let d2 = document.getElementById("moveout-input").value;

  let msBetweenD1And1970 = Date.parse(d1);
  let msBetweenD2And1970 = Date.parse(d2);
  let timeInMs = msBetweenD2And1970-msBetweenD1And1970;

  let ms = timeInMs;
  let months = Math.round(ms / 1000 / 60 / 60 / 24 / 30)
 
  var t1 = `That is ${months} months`;

  document.getElementById("m").textContent=t1
}

<h2><span id="m">$</span></h2>

<input type='date' id='movein-input' value='2021-03-01' />
<input type='date' id='moveout-input' value='2021-06-01' />
<button onclick='calculatePrice()'>calculate</button>

Why won't JavaScript code calculate months between two HTML date time inputs?

1 Answers1