how calculate number of hours in float between two times?

Question

I have a form with these inputs :

<input type="time" name="morningS"/>
<input type="time" name="morningE"/>
<input type="time" name="AfternoonS"/>
<input type="time" name="AfternoonE"/>
<input type="text" name="total"/>

they indicate the start and end time of morning and the afternoon what i want to do is calculate the number of hours in float automatically when i change the value and put it in the total input but i dont know how to do that in javascript, can someone please help ? as an example :

08:00 -> 10:00
13:00 -> 17:30
i want the output to be : 6.5

make a function that converts the time to seconds, little bit of math. And then a function to convert seconds into hours, also a little bit of math. And that pretty much all you need. No need to mess around with the whole Date object i'd say — Jarne Kompier, Aug 01 '22 at 10:08
I misclicked when marking this as a duplicate, and accidentally selected a question about finding the difference between two dates in days. Here's one for hours: https://stackoverflow.com/questions/19225414/how-to-get-the-hours-difference-between-two-date-objects — Daniel Beck, Aug 01 '22 at 11:34
See also https://stackoverflow.com/questions/542938/how-to-calculate-number-of-days-between-two-dates, https://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript, and many many more — Daniel Beck, Aug 01 '22 at 11:36

Nikita Aplin · Answer 1 · 2022-08-01T10:35:21.870

To get data from input you can use:

<input type="time" name="morningS"/>
<input type="time" name="morningE"/>

// morningS
document.getElementsByTagName("input")[0].value
// morningE
document.getElementsByTagName("input")[1].value

To solve your task:

const morningS = "08:00"
const morningE = "13:00"
const AfternoonS = "10:00"
const AfternoonE = "17:30"

// Math
const diffHoursE = parseInt(AfternoonE.split(":")[0]) - parseInt(morningE.split(":")[0])

const diffHoursS = parseInt(AfternoonS.split(":")[0]) - parseInt(morningS.split(":")[0])

const diffMinutesE = parseInt(AfternoonE.split(":")[1]) - parseInt(morningE.split(":")[1])

const diffMinutesS = parseInt(AfternoonS.split(":")[1]) - parseInt(morningS.split(":")[1])

// Result
console.log(result = diffHoursE + diffHoursS + (diffMinutesE + diffMinutesS)/60) //6.5

may i ask you what [indexOfInput] is supposed to be :) ? – lili Aug 01 '22 at 10:32 — lili, Aug 01 '22 at 10:32
@lili I edited post. Check it :) – Nikita Aplin Aug 01 '22 at 10:35 — Nikita Aplin, Aug 01 '22 at 10:35

score -1 · Answer 2 · answered Aug 01 '22 at 10:20

On change of both inputs, call this function with those elements to get the hours(Untested code. I hope, you get the idea).

function toHours(startTimeInputElement, endTimeInputElement) {
  const startDateTime = startTimeInputElement.valueAsDate; 
  if(startDateTime === null) {
    return 'N/A';
  }

  const endDateTime = endTimeInputElement.valueAsDate; 
  if(endDateTime === null) {
    return 'N/A';
  }

  const differenceInMilliseconds = endDateTime.getTime() - startDateTime.getTime();
  const differenceInHours = (differenceInMilliseconds/(1000 * 60 * 60)).toFixed(1);
  
  return differenceInHours;
  
}

I used valueAsDate attribute of the input element. You can check it here. There is also a valueAsNumber. That could probably be useful. Try that out.

how calculate number of hours in float between two times?

2 Answers2