How to Convert Hours and Minutes to Decimal Hours in JavaScript

Many apps need to turn a duration such as 7:30 into a decimal value for
timesheets, billing, exports, or reports.

A common mistake is to write 7:30 as 7.30. That is not correct decimal
time. Minutes use a base of 60, so 30 minutes is half an hour:

text
7 hours + 30 / 60 = 7.5 hours
This post shows how to handle that conversion in JavaScript and how to convert
the value back again.
Convert time to decimal hours
The safest approach is to convert every unit to seconds first, then divide by
the number of seconds in one hour.
function toDecimalHours(hours, minutes, seconds = 0) {
  if (
    !Number.isFinite(hours) ||
    !Number.isFinite(minutes) ||
    !Number.isFinite(seconds)
  ) {
    throw new TypeError('Hours, minutes, and seconds must be numbers.');
  }

  if (hours < 0 || minutes < 0 || minutes >= 60 || seconds < 0 || seconds >= 60) {
    throw new RangeError('Provide a valid non-negative duration.');
  }

  const totalSeconds = hours * 3600 + minutes * 60 + seconds;

  return totalSeconds / 3600;
}
Now we can convert a few common durations:
console.log(toDecimalHours(7, 30)); // 7.5
console.log(toDecimalHours(8, 15)); // 8.25
console.log(toDecimalHours(6, 45)); // 6.75
console.log(toDecimalHours(1, 30, 30)); // 1.5083333333333333
For display purposes, it is usually useful to round the result rather than
showing a long floating-point value.
function formatDecimalHours(value, digits = 2) {
  return Number(value.toFixed(digits));
}

const duration = toDecimalHours(1, 30, 30);

console.log(formatDecimalHours(duration)); // 1.51
Why 7:30 is not 7.30
The decimal part of a number is based on one hundredths. Time is based on
sixtieths.
That means:
Clock time  Decimal hours
15 minutes  0.25
30 minutes  0.50
45 minutes  0.75
1 hour 15 minutes   1.25
1 hour 30 minutes   1.50
1 hour 45 minutes   1.75

The conversion is always:
decimalHours = hours + minutes / 60;
Using hours + minutes / 100 is the bug to avoid.
Convert decimal hours back to hours and minutes
For the reverse conversion, multiply decimal hours by 3,600 to get the total
number of seconds. Rounding to a whole second prevents tiny floating-point
differences from producing unexpected output.
function fromDecimalHours(decimalHours) {
  if (!Number.isFinite(decimalHours) || decimalHours < 0) {
    throw new RangeError('Decimal hours must be a non-negative number.');
  }

  const totalSeconds = Math.round(decimalHours * 3600);
  const hours = Math.floor(totalSeconds / 3600);
  const remainingSeconds = totalSeconds % 3600;
  const minutes = Math.floor(remainingSeconds / 60);
  const seconds = remainingSeconds % 60;

  return { hours, minutes, seconds };
}
Examples:
console.log(fromDecimalHours(7.5));
// { hours: 7, minutes: 30, seconds: 0 }

console.log(fromDecimalHours(8.25));
// { hours: 8, minutes: 15, seconds: 0 }

console.log(fromDecimalHours(7.2));
// { hours: 7, minutes: 12, seconds: 0 }
A practical note about rounding
The calculation and the business rule are not always the same thing.
For example, some payroll systems round time to the nearest 15 minutes, while
others require exact time converted to two decimal places. Convert the actual
duration first, then apply the employer's or client's rounding policy.
Keeping those steps separate makes the code easier to test and reduces billing
errors.
Try the conversion without writing code
If you only need a quick conversion, use this
time to decimal calculator. It converts clock time
to decimal hours and converts decimal hours back into hours, minutes, and
seconds directly in the browser.
The core rule remains simple: convert the minutes into a fraction of 60, then
add that fraction to the whole hours.