JavaScript Difference Between Two Dates In Hours And Minutes

This JavaScript code snippet helps you to calculate difference between two dates with given time in minutes and seconds. It sets up a simple time difference calculator with a start time and end time. It does the following:

1. Defines variables for the start hour, minute, and second, as well as the end hour, minute, and second, and a button and output field.
2. Sets up an event listener on the button that, when clicked, calculates the time difference between the start and end times.
3. Creates a new Date object for the start and end times using the values selected by the user.
4. Calculates the difference between the start and end times, and formats it into hours, minutes, and seconds.
5. Outputs the difference in time to the output field. If the difference is negative (i.e. end time is earlier than start time), it outputs a message indicating that the user has “gone back to the future”.

How to Create Javascript Difference Between Two Dates In Hours And Minutes

Create the HTML structure as follows:

<div class="container">
  <div class="dates">
    <div class="start">
      <i>Start time:</i> <br />
      <input type="number" min="0" max="24" id="s_h" placeholder="HH" />
      <input type="number" min="0" max="60" id="s_m" placeholder="MM" />
      <input type="number" min="0" max="60" id="s_s" placeholder="SS" />
    </div>
    <div class="space"></div>
    <div class="end">
      <i>End time:</i> <br />
      <input type="number" min="0" max="24" id="e_h" placeholder="HH" />
      <input type="number" min="0" max="60" id="e_m" placeholder="MM" />
      <input type="number" min="0" max="60" id="e_s" placeholder="SS" />
    </div>
  </div>
  <button id="button">Perform some magic ✨</button>
  <div id="output"></div>
</div>

Style using the following CSS styles:

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #6930C3;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background: #4EA8DE;
width: 100%;
}

.dates {
  display: flex;
  text-align: center;
}
.dates i {
  margin-bottom: 10px;
}
.dates input {
  width: 40px;
  padding: 5px;
  margin-top: 10px;
}

.space {
  margin: 0px 10px;
}

button {
  margin-top: 20px;
  font-size: 24px;
  padding: 10px 20px;
  background: #7400B8;
  border-radius: 5px;
  color: #80FFDB;
  cursor: pointer;
  transition: all 0.5s ease;
}
button:hover {
  background: #6930C3;
}

#output {
  margin-top: 20px;
  font-size: 18px;
}

Add the following JavaScript function:

const startHour = document.getElementById("s_h"),
  startMinute = document.getElementById("s_m"),
  startSecond = document.getElementById("s_s"),
  endHour = document.getElementById("e_h"),
  endMinute = document.getElementById("e_m"),
  endSecond = document.getElementById("e_s"),
  button = document.getElementById("button"),
  output = document.getElementById("output");

button.addEventListener("click", function () {
  let startDate = new Date(2020,05,05,startHour.value,startMinute.value,startSecond.value);
  let endDate = new Date(2020,05,05,endHour.value,endMinute.value,endSecond.value);
  let difference = endDate.getTime() - startDate.getTime();
  if (difference < 0) {
    output.innerHTML = "Wow dude, you just went back to the future! 👽";
  } else {
    difference = difference / 1000;
    let hourDifference = Math.floor(difference / 3600);
    difference -= hourDifference * 3600;
    let minuteDifference = Math.floor(difference / 60);
    difference -= minuteDifference * 60;
    output.innerHTML = `${hourDifference} hours, ${minuteDifference} minutes, ${difference} seconds`;
  }
});

That’s all! hopefully, you have successfully integrated this JavaScript code snippet to calculate time difference between two dates in hours and minutes. If you have any questions or suggestions, feel free to comment below.