0

I am trying to convert seconds to hh:mm:ss format with javascript. I found a lot of topics about this like this one, but I still have trouble implementing this.

This is my code:

function buildList(item, index) {
....
    var listItemTime = $('.time', listItem);
      listItemTime.html(secondsToHms(item.time));
      $('#dataList').append(listItem);
}

function secondsToHms(d) {
      var time = (new Date).clearTime()
              .addSeconds(d)
              .toString('H:mm:ss');

    console.log(time);
    return time;
}

I got an error: TypeError: (new Date(...)).clearTime is not a function

I also tried to use moment:

function secondsToHms(d) {
      return moment().startOf('day')
            .seconds(d)
            .format('H:mm:ss');
}

And I got the error:

moment is not defined

I installed moment with npm install moment --save and then tried to require it, but the component was not working anymore.

MLavoie
  • 9,671
  • 41
  • 36
  • 56
j.doe
  • 4,559
  • 6
  • 20
  • 31

2 Answers2

2

clearTime is a function of Datejs, which is an additional dependency you would need to pull in. Unless you link DateJs to your code, e.g. by including

<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>

in your <head> block, you will see anerror that the method does not exist.

You may want to instead use the standard library function toTimeString. Which outputs results like this 14:26:27 GMT+0100 (GMT Daylight Time).

As an alternative, if HH:mm:ss format is essential, you can use the following code to print the required string.

function secondsToHms(d) {    
    var hours = d.getHours().toString().padStart(2, '0')    
    var minutes = d.getMinutes().toString().padStart(2, '0')    
    var seconds = d.getSeconds().toString().padStart(2, '0')

    return `${hours}:${minutes}:${seconds}`
}

Both of these methods can be seen running in this jsfiddle

Hanna
  • 21
  • 4
  • Note that this will include results like `9:40:2` or `10:8:14`, which probably wouldn't be appreciated. – Scott Sauyet Apr 03 '18 at 13:41
  • Thanks Scott, you are completely correct, I've updated the fiddle in my answer to fix this issue using `padStart` as mentioned in [this](https://stackoverflow.com/a/2998822/6809918) answer – Hanna Apr 03 '18 at 13:49
  • Please update the answer as well. Fiddles are fine, but important code should also be included in the answer. – Scott Sauyet Apr 03 '18 at 13:57
  • d is the number of second I want to convert. I tried your code as following: function secondsToHms(s) { var d = new Date(0); d.setSeconds(s); var time = d.getHours()... but I get an extra hour. the result looks like 01:33:20 where it should be 00:33:20 – j.doe Apr 03 '18 at 14:07
  • j, I think you probably need to use `getUTCHours`, `getUTCMinutes` and `getUTCSeconds`. It sounds like your local timezone is UTC + 1 – Hanna Apr 03 '18 at 14:30
2

Unless you have a lot more that needs to be done with dates, this is too simple a problem to bring in DateJs, Moment, or -- my preference -- date-fp.

You can simply write it like this:

const secondsToHms = s => ({
  hours: (s - s % 3600) / 3600, 
  minutes: ((s - s % 60) / 60) % 60, 
  seconds: s % 60
})

And then format the result of that however you like.

(Note, four years later: a downvote made me look at this old answer, and realize that it was wrong for larger number of hours. This should be fixed now.)

Scott Sauyet
  • 49,207
  • 4
  • 49
  • 103