'JavaScript seconds to time string with format hh:mm:ss
I want to convert a duration of time, i.e., number of seconds to colon-separated time string (hh:mm:ss)
I found some useful answers here but they all talk about converting to x hours and x minutes format.
So is there a tiny snippet that does this in jQuery or just raw JavaScript?
Solution 1:[1]
You can manage to do this without any external JS library with the help of JS Date method like following:
var date = new Date(0);
date.setSeconds(45); // specify value for SECONDS here
var timeString = date.toISOString().substr(11, 8);
console.log(timeString)Solution 2:[2]
To get the time part in the format hh:MM:ss, you can use this regular expression:
(This was mentioned above in same post by someone, thanks for that.)
var myDate = new Date().toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
console.log(myDate)Solution 3:[3]
I recommend ordinary javascript, using the Date object. (For a shorter solution, using toTimeString, see the second code snippet.)
var seconds = 9999;
// multiply by 1000 because Date() requires miliseconds
var date = new Date(seconds * 1000);
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
// If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
// if (hh > 12) {hh = hh % 12;}
// These lines ensure you have two-digits
if (hh < 10) {hh = "0"+hh;}
if (mm < 10) {mm = "0"+mm;}
if (ss < 10) {ss = "0"+ss;}
// This formats your string to HH:MM:SS
var t = hh+":"+mm+":"+ss;
document.write(t);
(Of course, the Date object created will have an actual date associated with it, but that data is extraneous, so for these purposes, you don't have to worry about it.)
Edit (short solution):
Make use of the toTimeString function and split on the whitespace:
var seconds = 9999; // Some arbitrary value
var date = new Date(seconds * 1000); // multiply by 1000 because Date() requires miliseconds
var timeStr = date.toTimeString().split(' ')[0];
toTimeString gives '16:54:58 GMT-0800 (PST)', and splitting on the first whitespace gives '16:54:58'.
Solution 4:[4]
A Google search turned up this result:
function secondsToTime(secs)
{
secs = Math.round(secs);
var hours = Math.floor(secs / (60 * 60));
var divisor_for_minutes = secs % (60 * 60);
var minutes = Math.floor(divisor_for_minutes / 60);
var divisor_for_seconds = divisor_for_minutes % 60;
var seconds = Math.ceil(divisor_for_seconds);
var obj = {
"h": hours,
"m": minutes,
"s": seconds
};
return obj;
}
Solution 5:[5]
Here's my take on it:
function formatTime(seconds) {
const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = Math.round(seconds % 60);
return [
h,
m > 9 ? m : (h ? '0' + m : m || '0'),
s > 9 ? s : '0' + s
].filter(Boolean).join(':');
}
Expected results:
const expect = require('expect');
expect(formatTime(0)).toEqual('0:00');
expect(formatTime(1)).toEqual('0:01');
expect(formatTime(599)).toEqual('9:59');
expect(formatTime(600)).toEqual('10:00');
expect(formatTime(3600)).toEqual('1:00:00');
expect(formatTime(360009)).toEqual('100:00:09');
expect(formatTime(0.2)).toEqual('0:00');
Solution 6:[6]
Variation on a theme. Handles single digit seconds a little differently
seconds2time(0) -> "0s"
seconds2time(59) -> "59s"
seconds2time(60) -> "1:00"
seconds2time(1000) -> "16:40"
seconds2time(4000) -> "1:06:40"
function seconds2time (seconds) {
var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60);
var seconds = seconds - (hours * 3600) - (minutes * 60);
var time = "";
if (hours != 0) {
time = hours+":";
}
if (minutes != 0 || time !== "") {
minutes = (minutes < 10 && time !== "") ? "0"+minutes : String(minutes);
time += minutes+":";
}
if (time === "") {
time = seconds+"s";
}
else {
time += (seconds < 10) ? "0"+seconds : String(seconds);
}
return time;
}
Solution 7:[7]
function formatTime(seconds) {
return [
parseInt(seconds / 60 / 60),
parseInt(seconds / 60 % 60),
parseInt(seconds % 60)
]
.join(":")
.replace(/\b(\d)\b/g, "0$1")
}
Solution 8:[8]
Using the amazing moment.js library:
function humanizeDuration(input, units ) {
// units is a string with possible values of y, M, w, d, h, m, s, ms
var duration = moment().startOf('day').add(units, input),
format = "";
if(duration.hour() > 0){ format += "H [hours] "; }
if(duration.minute() > 0){ format += "m [minutes] "; }
format += " s [seconds]";
return duration.format(format);
}
This allows you to specify any duration be it hours, minutes, seconds, mills, and returns a human readable version.
Solution 9:[9]
I like the first answer. There some optimisations:
source data is a Number. additional calculations is not needed.
much excess computing
Result code:
Number.prototype.toHHMMSS = function () {
var seconds = Math.floor(this),
hours = Math.floor(seconds / 3600);
seconds -= hours*3600;
var minutes = Math.floor(seconds / 60);
seconds -= minutes*60;
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
return hours+':'+minutes+':'+seconds;
}
Solution 10:[10]
It's pretty easy,
function toTimeString(seconds) {
return (new Date(seconds * 1000)).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];
}
Solution 11:[11]
new Date().toString().split(" ")[4];
result 15:08:03
Solution 12:[12]
Easiest way to do it.
new Date(sec * 1000).toISOString().substr(11, 8)
Solution 13:[13]
s2t=function (t){
return parseInt(t/86400)+'d '+(new Date(t%86400*1000)).toUTCString().replace(/.*(\d{2}):(\d{2}):(\d{2}).*/, "$1h $2m $3s");
}
s2t(123456);
result:
1d 10h 17m 36s
Solution 14:[14]
I liked Webjins answer the most, so i extended it to display days with a d suffix, made display conditional and included a s suffix on plain seconds:
function sec2str(t){
var d = Math.floor(t/86400),
h = ('0'+Math.floor(t/3600) % 24).slice(-2),
m = ('0'+Math.floor(t/60)%60).slice(-2),
s = ('0' + t % 60).slice(-2);
return (d>0?d+'d ':'')+(h>0?h+':':'')+(m>0?m+':':'')+(t>60?s:s+'s');
}
returns "3d 16:32:12" or "16:32:12" or "32:12" or "12s"
Solution 15:[15]
I loved Powtac's answer, but I wanted to use it in angular.js, so I created a filter using his code.
.filter('HHMMSS', ['$filter', function ($filter) {
return function (input, decimals) {
var sec_num = parseInt(input, 10),
decimal = parseFloat(input) - sec_num,
hours = Math.floor(sec_num / 3600),
minutes = Math.floor((sec_num - (hours * 3600)) / 60),
seconds = sec_num - (hours * 3600) - (minutes * 60);
if (hours < 10) {hours = "0"+hours;}
if (minutes < 10) {minutes = "0"+minutes;}
if (seconds < 10) {seconds = "0"+seconds;}
var time = hours+':'+minutes+':'+seconds;
if (decimals > 0) {
time += '.' + $filter('number')(decimal, decimals).substr(2);
}
return time;
};
}])
It's functionally identical, except that I added in an optional decimals field to display fractional seconds. Use it like you would any other filter:
{{ elapsedTime | HHMMSS }} displays: 01:23:45
{{ elapsedTime | HHMMSS : 3 }} displays: 01:23:45.678
Solution 16:[16]
Here is an example of using Date.prototype.toLocaleTimeString(). I chose GB as the language, because the US shows a 24 instead of a 00 for the initial hour. Furthermore, I chose Etc/UTC as the time zone, because UTC is aliased to it in the list of tz database time zones.
const formatTime = (seconds) =>
new Date(seconds * 1000).toLocaleTimeString('en-GB', {
timeZone:'Etc/UTC',
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
console.log(formatTime(75)); // 00:01:15.as-console-wrapper { top: 0; max-height: 100% !important; }Here is the same example, but with Intl.DateTimeFormat. This variant lets you instantiate a reusable formatter object, which is more performant.
const dateFormatter = new Intl.DateTimeFormat('en-GB', {
timeZone:'Etc/UTC',
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
const formatTime = (seconds) => dateFormatter.format(new Date(seconds * 1000));
console.log(formatTime(75)); // 00:01:15.as-console-wrapper { top: 0; max-height: 100% !important; }Solution 17:[17]
Here is yet another version, which handles days also:
function FormatSecondsAsDurationString( seconds )
{
var s = "";
var days = Math.floor( ( seconds / 3600 ) / 24 );
if ( days >= 1 )
{
s += days.toString() + " day" + ( ( days == 1 ) ? "" : "s" ) + " + ";
seconds -= days * 24 * 3600;
}
var hours = Math.floor( seconds / 3600 );
s += GetPaddedIntString( hours.toString(), 2 ) + ":";
seconds -= hours * 3600;
var minutes = Math.floor( seconds / 60 );
s += GetPaddedIntString( minutes.toString(), 2 ) + ":";
seconds -= minutes * 60;
s += GetPaddedIntString( Math.floor( seconds ).toString(), 2 );
return s;
}
function GetPaddedIntString( n, numDigits )
{
var nPadded = n;
for ( ; nPadded.length < numDigits ; )
{
nPadded = "0" + nPadded;
}
return nPadded;
}
Solution 18:[18]
function toHHMMSS(seconds) {
var h, m, s, result='';
// HOURs
h = Math.floor(seconds/3600);
seconds -= h*3600;
if(h){
result = h<10 ? '0'+h+':' : h+':';
}
// MINUTEs
m = Math.floor(seconds/60);
seconds -= m*60;
result += m<10 ? '0'+m+':' : m+':';
// SECONDs
s=seconds%60;
result += s<10 ? '0'+s : s;
return result;
}
Examples
toHHMMSS(111);
"01:51"
toHHMMSS(4444);
"01:14:04"
toHHMMSS(33);
"00:33"
Solution 19:[19]
I think performance wise this is by far the fastest:
var t = 34236; // your seconds
var time = ('0'+Math.floor(t/3600) % 24).slice(-2)+':'+('0'+Math.floor(t/60)%60).slice(-2)+':'+('0' + t % 60).slice(-2)
//would output: 09:30:36
Solution 20:[20]
Here's how I did it. It seems to work fairly well, and it's extremely compact. (It uses a lot of ternary operators, though)
function formatTime(seconds) {
var hh = Math.floor(seconds / 3600),
mm = Math.floor(seconds / 60) % 60,
ss = Math.floor(seconds) % 60;
return (hh ? (hh < 10 ? "0" : "") + hh + ":" : "") + ((mm < 10) && hh ? "0" : "") + mm + ":" + (ss < 10 ? "0" : "") + ss
}
...and for formatting strings...
String.prototype.toHHMMSS = function() {
formatTime(parseInt(this, 10))
};
Solution 21:[21]
You can use the following function to convert time (in seconds) to HH:MM:SS format :
var convertTime = function (input, separator) {
var pad = function(input) {return input < 10 ? "0" + input : input;};
return [
pad(Math.floor(input / 3600)),
pad(Math.floor(input % 3600 / 60)),
pad(Math.floor(input % 60)),
].join(typeof separator !== 'undefined' ? separator : ':' );
}
Without passing a separator, it uses : as the (default) separator :
time = convertTime(13551.9941351); // --> OUTPUT = 03:45:51
If you want to use - as a separator, just pass it as the second parameter:
time = convertTime(1126.5135155, '-'); // --> OUTPUT = 00-18-46
Demo
var convertTime = function (input, separator) {
var pad = function(input) {return input < 10 ? "0" + input : input;};
return [
pad(Math.floor(input / 3600)),
pad(Math.floor(input % 3600 / 60)),
pad(Math.floor(input % 60)),
].join(typeof separator !== 'undefined' ? separator : ':' );
}
document.body.innerHTML = '<pre>' + JSON.stringify({
5.3515555 : convertTime(5.3515555),
126.2344452 : convertTime(126.2344452, '-'),
1156.1535548 : convertTime(1156.1535548, '.'),
9178.1351559 : convertTime(9178.1351559, ':'),
13555.3515135 : convertTime(13555.3515135, ',')
}, null, '\t') + '</pre>';See also this Fiddle.
Solution 22:[22]
There's a new method for strings on the block: padStart
const str = '5';
str.padStart(2, '0'); // 05
Here is a sample use case: YouTube durations in 4 lines of JavaScript
Solution 23:[23]
const secondsToTime = (seconds, locale) => {
const date = new Date(0);
date.setHours(0, 0, seconds, 0);
return date.toLocaleTimeString(locale);
}
console.log(secondsToTime(3610, "en"));where the locale parameter ("en", "de", etc.) is optional
Solution 24:[24]
A regular expression can be used to match the time substring in the string returned from the toString() method of the Date object, which is formatted as follows: "Thu Jul 05 2012 02:45:12 GMT+0100 (GMT Daylight Time)". Note that this solution uses the time since the epoch: midnight of January 1, 1970. This solution can be a one-liner, though splitting it up makes it much easier to understand.
function secondsToTime(seconds) {
const start = new Date(1970, 1, 1, 0, 0, 0, 0).getTime();
const end = new Date(1970, 1, 1, 0, 0, parseInt(seconds), 0).getTime();
const duration = end - start;
return new Date(duration).toString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
}
Solution 25:[25]
Here is a fairly simple solution that rounds to the nearest second!
var returnElapsedTime = function(epoch) {
//We are assuming that the epoch is in seconds
var hours = epoch / 3600,
minutes = (hours % 1) * 60,
seconds = (minutes % 1) * 60;
return Math.floor(hours) + ":" + Math.floor(minutes) + ":" + Math.round(seconds);
}Solution 26:[26]
This is one I wrote recently for MM:SS. It's not exact to the question, but it's a different one-liner format.
const time = 60 * 2 + 35; // 2 minutes, 35 seconds
const str = (~~(time / 60) + "").padStart(2, '0') + ":" + (~~((time / 60) % 1 * 60) + "").padStart(2, '0');
str // 02:35
Edit: This was added for variety, but the best solution here is https://stackoverflow.com/a/25279399/639679 below.
Solution 27:[27]
The most general answer to this is
function hms(seconds) {
return [3600, 60]
.reduceRight(
(p, b) => r => [Math.floor(r / b)].concat(p(r % b)),
r => [r]
)(seconds)
.map(a => a.toString().padStart(2, '0'))
.join(':');
}
Some example outputs:
> hms(0)
< "00:00:00"
> hms(5)
< "00:00:05"
> hms(60)
< "00:01:00"
> hms(3785)
< "01:03:05"
> hms(37850)
< "10:30:50"
> hms(378500)
< "105:08:20"
See explanation at https://stackoverflow.com/a/66504936/1310733
Solution 28:[28]
This is how i did it
function timeFromSecs(seconds)
{
return(
Math.floor(seconds/86400)+'d :'+
Math.floor(((seconds/86400)%1)*24)+'h : '+
Math.floor(((seconds/3600)%1)*60)+'m : '+
Math.round(((seconds/60)%1)*60)+'s');
}
timeFromSecs(22341938) will return '258d 14h 5m 38s'
Solution 29:[29]
I'm personally prefer the leading unit (days, hours, minutes) without leading zeros. But seconds should always be leaded by minutes (0:13), this presentation is easily considered as 'duration', without further explanation (marking as min, sec(s), etc.), usable in various languages (internationalization).
// returns (-)d.h:mm:ss(.f)
// (-)h:mm:ss(.f)
// (-)m:ss(.f)
function formatSeconds (value, fracDigits) {
var isNegative = false;
if (isNaN(value)) {
return value;
} else if (value < 0) {
isNegative = true;
value = Math.abs(value);
}
var days = Math.floor(value / 86400);
value %= 86400;
var hours = Math.floor(value / 3600);
value %= 3600;
var minutes = Math.floor(value / 60);
var seconds = (value % 60).toFixed(fracDigits || 0);
if (seconds < 10) {
seconds = '0' + seconds;
}
var res = hours ? (hours + ':' + ('0' + minutes).slice(-2) + ':' + seconds) : (minutes + ':' + seconds);
if (days) {
res = days + '.' + res;
}
return (isNegative ? ('-' + res) : res);
}
//imitating the server side (.net, C#) duration formatting like:
public static string Format(this TimeSpan interval)
{
string pattern;
if (interval.Days > 0) pattern = @"d\.h\:mm\:ss";
else if (interval.Hours > 0) pattern = @"h\:mm\:ss";
else pattern = @"m\:ss";
return string.Format("{0}", interval.ToString(pattern));
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow