Angular DatePipe - Convert seconds to time with zero timezone (12 instead of 00)

Question

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?

Bogeyman

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. – Harbard

Answer 1

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).

Bogeyman

Answer 2

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.

Retentivity

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. – Isogamete

Answer 3

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);

Floorer

at least give credit to the original author of the code you posted – Retentivity

this is not even Angular this is plain vanillaJS – Alfonzoalford

"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 – Alfonzoalford