Angular.js: Seconds to HH:mm:ss filter

Question

I have a number of seconds count, for example, 713 seconds. How can I implement an Angular.js filter that converts this 713 seconds to HH:mm:ss format? In this case, it should be 00:11:53

<div>
  {{ 713 | secondsToHHMMSS }} <!-- Should output 00:11:53 -->
</div>

Answer 1

Try something like this:

app.filter('secondsToDateTime', [function() {     return function(seconds) {         return new Date(1970, 0, 1).setSeconds(seconds);     }; }]) 

html:

<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b> 

Demo

Answer 2

manzapanza's answer only works if the seconds are less than 86400 (1 day). The date object needs to be completely zero. Also, it would be better to return the actual date object so that angularjs does not have to make it again.

app.filter('secondsToDateTime', function() {     return function(seconds) {         var d = new Date(0,0,0,0,0,0,0);         d.setSeconds(seconds);         return d;     }; }); 

and

<b>{{seconds | secondsToDateTime | date:'HH:mm:ss'}}</b> 

---

Edit: If you want hours to go above 24 without wrapping to days it is better to not use Date:

app.filter('secondsToTime', function() {      function padTime(t) {         return t < 10 ? "0"+t : t;     }      return function(_seconds) {         if (typeof _seconds !== "number" || _seconds < 0)             return "00:00:00";          var hours = Math.floor(_seconds / 3600),             minutes = Math.floor((_seconds % 3600) / 60),             seconds = Math.floor(_seconds % 60);          return padTime(hours) + ":" + padTime(minutes) + ":" + padTime(seconds);     }; }); 

and

<b>{{seconds | secondsToTime}}</b> 

Answer 3

Try this:

app.filter('secondsToHHmmss', function($filter) {
    return function(seconds) {
        return $filter('date')(new Date(0, 0, 0).setSeconds(seconds), 'HH:mm:ss');
    };
})

html:

<b>{{seconds | secondsToHHmmss}}</b>