using moment.js to display duration in format 00:XX when duration is less than an hour

Question

I'm trying to format a countdown timer using moment duration format but as soon as time hits below 60 minutes , the hours disappear e.g. 60 minutes display as "01:00" which is correct 59 minutes display as "59" which is not correct, it should display as "00:59"

where 3500000 milliseconds is equal to 58 minutes

I have the following code:

moment.duration(3500000).format("hh:mm", { forceLength: true })

which displays result : 58, rather than 00:58

what am I doing wrong here ?

I have also attempted the variation to no avail

moment.duration(3500000).format("HH:mm", { forceLength: true })

Answer 1

I can explain what's happening (I created the moment-duration-format plugin).

The forceLength option only affects the first token that has a value, meaning the first token with a value greater than 0. In your case, the hh token doesn't have a value. https://github.com/jsmreese/moment-duration-format#force-length

Switching from hh to HH means something for formatting moment objects (dates), but not for formatting moment duration objects (lengths of time) with my plugin (unless you've customized the duration formatting tokens, which is possible using my plugin).

Using moment(moment.duration(3500000)._data).format("HH:mm"); as suggested is a nice creative workaround.

If you want to grab the version of moment-duration-format that's on the repository's dev branch, there is an option that can help (see https://github.com/jsmreese/moment-duration-format/issues/22)...

In that version you can use the * character to denote the minimum token to show while trimming, even with it has no value:

moment.duration(3510000).format("*hh:mm");
--> "00:59"
moment.duration(3509999).format("*hh:mm");
--> "00:58"

Note that the default behaviour in the dev branch version changed from truncate to round so you'll drop from 00:59 to 00:58 as you pass from 58 minutes 30 seconds to 58 minutes 29 seconds. In that version you could turn on the trunc option for this output:

moment.duration(3539999).format("*hh:mm", { trunc: true });
--> "00:58"
moment.duration(3540000).format("*hh:mm", { trunc: true });
--> "00:59"

Not sure if that's what you would want for your countdown solution... maybe a feature of setting floor (trunc), ceiling, or round on the remainder would be best?

If you wanted a ceiling behaviour, you could use the dev branch version along with trunc and add 60000 to your timer value:

moment.duration(3540000 + 60000).format("*hh:mm", { trunc: true });
--> "01:00"
moment.duration(3539999 + 60000).format("*hh:mm", { trunc: true });
--> "00:59"
moment.duration(3500000 + 60000).format("*hh:mm", { trunc: true });
--> "00:59"
moment.duration(3480000 + 60000).format("*hh:mm", { trunc: true });
--> "00:59"
moment.duration(3479999 + 60000).format("*hh:mm", { trunc: true });
--> "00:58"