13

I want to convert number (which represents seconds) using DatePipe to get result like this :

00:00:05

I've tried doing so with DatePipe this way:

<label>No timezone (default) {{ 5 * 1000 | date:'h:mm:ss'}}</label>

But it produces result with timezone +4 included (which is not what I want):

4:00:05

So in order to avoid this I'm trying to set timezone offset to 0:

<label>{{ 5 * 1000 | date:'h:mm:ss z':'+0000'}}</label>
<label>{{ 5 * 1000 | date:'h:mm:ss z':'UTC'}}</label>
<label>{{ 5 * 1000 | date:'h:mm:ss z':'GMT'}}</label>
<label>{{ 5 * 1000 | date:'h:mm:ss z':'GMT+0'}}</label>
<label>{{ 5 * 1000 | date:'h:mm:ss z':'UTC+0'}}</label>

But this time the time is shifted with 12 hours instead of 0:

12:00:05 GMT+0

So is there a way to convert seconds to time with DatePipe without shifted timezone?
Or is there any other pipe by angular which can be used for this purpose?

Just Shadow
  • 10,860
  • 6
  • 57
  • 75
  • If you are converting just plain number of seconds to that format, rather than torturing date pipe and deal with different time formats and zones, I would create custom pipe. The math is easy and you will spend less time with that for sure. On top of that, it will not change, while date pipe might, as it did in the past. – PeS Sep 13 '18 at 22:26

3 Answers3

31

So this quite tricky problem has a quite simple solution.
We just have to use 'H' instead of 'h' (range of which is 0-23).
Example:

<label>{{ 5 * 1000 | date:'H:mm:ss':'UTC'}}</label>

The reason of getting '12' was the usage of 'h' in time format which limits values from 1 to 12 and converts 00:00 to 12:00 (AM).

enter image description here

Just Shadow
  • 10,860
  • 6
  • 57
  • 75
3

This is very easy with MomentJS

const SECONDS_COUNT = 61;

const duration = moment.duration(SECONDS_COUNT, 'seconds');
const resultstring = moment.utc(duration.asMilliseconds()).format('HH:mm:ss');
console.log(resultstring);

should output 00:01:01

make sure you use moment.utc() to output and not moment() to avoid locale settings kicking in.

Stavm
  • 7,833
  • 5
  • 44
  • 68
  • 3
    even moment team encourage you to use different more lightweight/fast library, because it has a huge footprint, and is slow, you don't need it for such primary task in angular. – Mardari Jun 07 '21 at 09:20
0

If your problem is just the conversion try this:

var date = new Date(null);
date.setSeconds(SECONDS); // specify value for SECONDS here
var result = date.toISOString().substr(11, 8);
R. Richards
  • 24,603
  • 10
  • 64
  • 64
Yamaceko
  • 1
  • 8
    at least give credit to the [original author](https://stackoverflow.com/questions/1322732/convert-seconds-to-hh-mm-ss-with-javascript/25279340#25279340) of the code you posted – Stavm Sep 13 '18 at 21:08
  • this is not even Angular this is plain vanillaJS –  Sep 13 '18 at 22:19
  • 1
    "The problem with this approach is that it will overflow after 24 hours, preventing you from showing more than this length of time. Perfect solution if you have less than 24 hours in seconds" - @Renato Gama –  Sep 13 '18 at 22:24