How to convert seconds to minutes and hours with vanilla JS

Working with time in JavaScript can be tricky. Today, I’m going to show you how to convert seconds in minutes and hours with vanilla JS.

Fair warning: we’re going to need to do some math.

Converting hours

Let’s say you had a timestamp in seconds that you wanted to display in HH:MM:SS format.

var timestamp = 9462;

First, let’s get hours.

There are 60 seconds in a minute, and 60 minutes in an hour. We’ll divide our timestamp by 60, and then by 60 again. That leaves us with 2.6283 repeating.

var timestamp = 9462;

// 2.628333333
var hours = timestamp / 60 / 60;

We want just hours, though. We can use Math.floor() to round down to the nearest whole number.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

Converting minutes

Next, let’s get minutes.

There are 60 seconds in a minute. Let’s divide our timestamp by 60, and use Math.floor() to round down to the nearest whole number. That leaves us with 157, because it also includes all of the minutes that in our hours.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 157
var minutes = Math.floor(timestamp / 60);

We’ll multiply our hours by 60 to get its value in minutes, then subtract to it from our minutes to get the correct value.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 37
var minutes = Math.floor(timestamp / 60) - (hours * 60);

Calculating seconds

Finally, let’s calculate seconds.

For this one, we can use the remainder operator. It returns the amount leftover after dividing by a number.

We’ll use it to divide our timestamp by 60 (the number of seconds in a minute). The number we get back is the seconds after we remove all of the minutes.

var timestamp = 9462;

// 2
var hours = Math.floor(timestamp / 60 / 60);

// 37
var minutes = Math.floor(timestamp / 60) - (hours * 60);

// 42
var seconds = timestamp % 60;

Formatting time

Now that we have our hours, minutes, and seconds, we’re ready to format them into our HH:MM:SS format.

We can use simple string concatenation for this. JavaScript will type cooerce our integers into strings.

// 2:37:42
var formatted = hours + ':' + minutes + ':' + seconds;

This might be good enough, but what if you wanted a leading 0 on the hours? What if our minutes or seconds were single digit numbers?

We can convert our numbers to strings and use the padStart() method to enforce a minimum number of digits.

// 02:37:42
var formatted = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');

And with that, we’re done. Here’s a demo on CodePen.

Special thanks to Steve Griffith, whose video on this topic helped me work through one of the areas I was stuck on with this one.