How to use format() on a moment.js duration?

Question

Is there any way I can use the moment.js format method on duration objects? I can't find it anywhere in the docs and it doesn't seen to be an attribute on duration objects.

I'd like to be able to do something like:

var diff = moment(end).unix() - moment(start).unix();
moment.duration(diff).format('hh:mm:ss')

Also, if there are any other libraries which can easily accommodate this sort of functionality, I'd be interested in recommendations.

Thanks!

Consulate

moment.utc(duration.asMilliseconds()).format('hh:mm:ss'); - A duration is a vector. By putting its tail on the origin you can use date formatting to get hh:mm:ss. – Lukey

moment.utc(moment.duration(23, 'seconds').asMilliseconds()).format('hh:mm:ss') => "12:00:23" doesn't work so well – Trinitroglycerin

Ah, I found the issue, HH:mm:ss will give 00:00:23 in my previous example. so just the wrong casing on the Hours part – Trinitroglycerin

For those who want to display duration in a readable way, use: moment.duration(diff_ms).humanize(); – Inlaw

Answer 1

We are looking into adding some kind of formatting to durations in moment.js. See https://github.com/timrwood/moment/issues/463

A couple other libraries that might help out are http://countdownjs.org/ and https://github.com/icambron/twix.js

Heisser

I'm looking forward to duration formatting too. Taking a look countdownjs now, but twix only seems to do "smart" formatting, not much customization. – Posting

While twix works hard to do smart formatting, it has lots of formatting options, right down to the tokens involved: github.com/icambron/twix.js/wiki/Formatting. Disclaimer: I'm the author of twix. – Alcoholism

Countdown.js is excellent, and the author is super-helpful (he just released 2 versions in the same day due to some suggestions I made)! – Stambul

Im down-voting because the github issue linked in this answer is just a never ending stream opinions, wishes and rants that lead no where, the issue is still open after 4 years, nothing userful – Tinaret

Why can't it be identical to the other .format used elsewhere in the library? This is insanity. 5 years and it's still not done? really?! – Boney

Down voting as well. The best option, IMHO is here: https://mcmap.net/q/108327/-how-to-use-format-on-a-moment-js-duration – Ferial

Gonna just downvote this since its an unfulfilled promise – Worrywart

thanks for proving that momentjs is officially dead – Charity

Answer 2

// set up
let start = moment("2018-05-16 12:00:00"); // some random moment in time (in ms)
let end = moment("2018-05-16 12:22:00"); // some random moment after start (in ms)
let diff = end.diff(start);

// execution
let f = moment.utc(diff.asMilliseconds()).format("HH:mm:ss.SSS");
alert(f);

Have a look at the JSFiddle

Zelig

Good approach. Although it doesn't work if I want to display days as well: DDD HH:mm:ss.SSS (where DDD is day of year) displays 1 when I want 0. Any quick fix for that? – Gilcrest

No easy way. I did this jsfiddle.net/fhdd8/14 , which is probably what you did, but I don't think moment has anything that does this out of the box – Zelig

It doesn't make any sense to display 10 quadrillion milliseconds as mm:ss – Bihari

this doesn't work past 24 hours (i.e. if I wanted to display 117 hours). otherwise great solution! – Historiated

@Historiated you can use "D" or "DD" if you'd like to show days. – Fiveandten

@Fiveandten -- the difference is if you want a leading 0 on the days. see momentjs.com/docs/#/displaying/format – Historiated

Thanks for this! I needed some literals too, and this works great: moment.utc(diff).format('d[d] h[h] m[m]') to output "1d 8h 27m" – Bevins

This answer is explaining how to display a formatted MomentJS MOMENT, not a DURATION, as the question states. – Ferial

@Ferial Not sure I understand what you're saying... var ms declaration is intended to be a duration (substituting the diff of two moments) – Zelig

@DavidGlass I see what you're saying now. Maybe make that a bit more clear w/ something like var duration = 54321 - 12345? – Ferial

I had to add ".asMilliseconds()" like @TaeKwanJoe's answer to get this to return anything other than 0 – Antipodes

The original question is about moment.duration() not about usual moment. It's different classes! – Thoroughbred

Answer 3

convert duration to ms and then to moment:

moment.utc(duration.as('milliseconds')).format('HH:mm:ss')

Rockyrococo

So this does not work if your duration is longer than 24h.. 24h is being reset to 0h – Dyal

@S.Robijns a useful observation but just to emphasise for others - this is the expected behaviour of .format('HH:mm:ss'). See the docs – Bidget

Answer 4

Use this plugin Moment Duration Format.

Example:

moment.duration(123, "minutes").format("h:mm");

Boxing

That formatting doesn't work properly, the duration side is good but if I specify hh:mm:mm and only have 10 seconds it shows 10 instead of 00:00:10 (even with forcelength on) If its not formatting... then it should be called something else, formats should be standardised. – Petrapetracca

@ppumkin i know this is old but if you specify { trim: false } it will stop that behaviour. – Eskil

This is what I prefer to use: Assume you have duration, like const duration = moment.duration(value, 'seconds'); than i can be formatted using: moment.utc(duration.as('milliseconds')).format('HH:mm:ss').toString(); – Atory

@EvgenyBobkin that won't work if your duration is longer than a day long, the library will handle it though – Antipodes

Answer 5

Use this line of code:

moment.utc(moment.duration(4500, "seconds").asMilliseconds()).format("HH:mm:ss")

Tylertylosis

If the duration is > of 86400'' (i.e. 24h), this will not work. – Demetria

It's the same in excel, it will roll over at 24 hrs. This is a great workaround if you're aware of the 24 hr limitation. – Engross

so when I use .utc the time is waaaaayyyy off. Why? – Genovera

Answer 6

var diff = moment(end).unix() - moment(start).unix();
moment.utc(moment.duration(diff).asMilliseconds()).format("HH:mm:ss.SSS");

Stiltner

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. (This post was flagged by at least one user, presumably because they thought an answer without explanation should be deleted.) – Residential

Explanationless or not, this is what did for me. Thanks :) – Forthcoming

Explanation is not needed. Moment.js doc can show how this solution was achieved. – Serle

Useless. Like most other answers on this question returns partial hours in the duration not total hours. E.g. returns 12:00 for the duration moment.duration({days: 2, hours: 12}) – D

moment.duration(diff).asMilliseconds() is excessive. You can just use diff, it's already in milliseconds. – Boney

Answer 7

The best scenario for my particular use case was:

var duration = moment.duration("09:30"),
    formatted = moment.utc(duration.asMilliseconds()).format("HH:mm");

This improves upon @Wilson's answer since it does not access private internal property _data.

Oarlock

Answer 8

You don't need .format. Use durations like this:

const duration = moment.duration(83, 'seconds');
console.log(duration.minutes() + ':' +duration.seconds());
// output: 1:23

I found this solution here: https://github.com/moment/moment/issues/463

EDIT:

And with padding for seconds, minutes and hours:

const withPadding = (duration) => {
    if (duration.asDays() > 0) {
        return 'at least one day';
    } else {
        return [
            ('0' + duration.hours()).slice(-2),
            ('0' + duration.minutes()).slice(-2),
            ('0' + duration.seconds()).slice(-2),
        ].join(':')
    }
}

withPadding(moment.duration(83, 'seconds'))
// 00:01:23

withPadding(moment.duration(6048000, 'seconds'))
// at least one day

Burgage

This won't include leading zeroes if duration.seconds() is less than 10, though... – Verne

What will happen if you have more seconds than an hour? Is it fine, that you then have more than 60 seconds? – Hottempered

Leading zeros works, but duration = moment.duration(7200, 'seconds'); withPadding(duration); will say "00:00". – Hottempered

@Hottempered I updated my answer again to include hours; if you need days, weeks, aso as well you can add them to the array – Burgage

@Burgage My problem with the solution is, that I might input 1 or 604800. Both should have proper results but no leading "00:". – Hottempered

if (duration.asDays() > 0) { return 'at least one day'; - am I reading that correctly? – Dissatisfaction

Answer 9

I needed to do this for work as a requirement to display the hours in this format. At first I tried this.

moment.utc(totalMilliseconds).format("HH:mm:ss")

However anything over 24 hours and the hours reset to 0. But the minutes and seconds were accurate. So I used only that part for the minutes and seconds.

var minutesSeconds = moment.utc(totalMilliseconds).format("mm:ss")

Now all I need is the total hours.

var hours = moment.duration(totalMilliseconds).asHours().toFixed()

And to get that format that we all want we just glue it together.

var formatted = hours + ":" + minutesSeconds

if totalMilliseconds is 894600000 this will return 249:30:00.

Hope that helped. Leave any questions in the comments. ;)

Resolution

Wouldn't 'toFixed()' round off the number? eg: '76.35' would become '77' and what you want is '76', and then append the hours and minutes to that. I used var hours = Math.floor(moment.duration(totalMilliseconds).asHours()). Everything else in your code is cool. Thanks for the answer. – Semiporcelain

Answer 10

I use:

var duration = moment.duration("09:30");
var str = moment(duration._data).format("HH:mm");

And I get "09:30" in var str.

Rattletrap

Great! This just works... how on earth did you come up with this :) – Rimose

Avoid this solution, _data is an internal property and may change without warning. – Gadgeteer

Unfortunately it will not work always as expected: moment(moment.duration(1200000)._data).format('hh:mm:ss') will return 12:20 instead of 00:20 – Philipines

@AnnaR h is in range 1-12, so it's rather expectable. Use H instead docs - hour tokens – Coinage

This is wrong, not only that you ignore DAYS, so 1day and 1hour will be shown as 01:00. In addition you are completely ignoring Time Zones, a better solution, but also isn't a complete one will be moment.utc(...).format("HH:mm"); – Miramirabeau

Answer 11

if diff is a moment

var diff = moment(20111031) - moment(20111010);
var formated1 = moment(diff).format("hh:mm:ss");
console.log("format 1: "+formated1);

Kinsfolk

This doesn't seem reliable in the face of time zones and such. Do you use this in production? – Freebooter

the question has no mention of time zones. – Kinsfolk

Everyone lives in a time zone. Does moment(0) always register as 12:00 AM in every time zone? – Freebooter

I'm simply asking if the code in your answer works or not because I am skeptical. I've written lots of code that works with dates, in many programming languages. Based on my experience, it seems that your code would only work in certain time zones – but I'm asking because perhaps there's something I don't know about how Javascript represents dates near the Unix epoch. – Freebooter

the second line will create a moment from start of time (1970). This won't do. – Sinusoidal

As @Harsh points out, the moment() constructor takes a unix timestamp, and so whatever you pass to it will be assumed to be a specific distance from 1/1/1970. – Scuff

Answer 12

If you're willing to use a different javascript library, numeral.js can format seconds as follows (example is for 1000 seconds):

var string = numeral(1000).format('00:00');
// '00:16:40'

Hartford

definitely the way to go. as expected. – Petrapetracca

Answer 13

If all hours must be displayed (more than 24) and if '0' before hours is not necessary, then formatting can be done with a short line of code:

Math.floor(duration.as('h')) + moment.utc(duration.as('ms')).format(':mm:ss')

Hooey

This is the best h:mm answer, but I think the best display is simply moment.duration(val,'seconds').humanize(). – Manlike

For my use case showing simply all hours with mm and ss was the best ways since it is compact and looks similar to a comma-separated value, and thus good for visual comparison. – Hooey

Answer 14

Based on ni-ko-o-kin's answer:

meassurements = ["years", "months", "weeks", "days", "hours", "minutes", "seconds"];
withPadding = (duration) => {
    var step = null;
    return meassurements.map((m) => duration[m]()).filter((n,i,a) => {
        var nonEmpty = Boolean(n);
        if (nonEmpty || step || i >= a.length - 2) {
            step = true;
        }
        return step;
    }).map((n) => ('0' + n).slice(-2)).join(':')
}

duration1 = moment.duration(1, 'seconds');
duration2 = moment.duration(7200, 'seconds');
duration3 = moment.duration(604800, 'seconds');

withPadding(duration1); // 00:01
withPadding(duration2); // 02:00:00
withPadding(duration3); // 01:07:00:00:00

Hottempered

I don't think it's very readable. What problem do you want to solve here? What is your usecase? – Burgage

I updated my answer again to deal with more than one day. It works fine for my use case. – Burgage

The problem is that in most cases your solution is not ideal because it contains too much leading zeros. Who wants to have "00:00:00:00:01" returned? My solution is "scalable" and adds just as much leading zeros as needed. – Hottempered

Works perfectly. Very simple output. If there are no days, there will be no zeros for days displayed etc. – Mclaren

Answer 15

Short version (one-liner):

moment.duration(durationInMs).asHours()|0||"00" + ":" + moment.utc(durationInMs).format("mm:ss")

Extended version:

export const formatDuration = (durationInMs) => {
    const hours = Math.floor(moment.duration(durationInMs).asHours()) || "00"
    return hours + ":" + moment.utc(durationInMs).format("mm:ss")
}

Example cases:

Evangelia

Answer 16

I use the classic format function in these cases:

var diff = moment(end).unix() - moment(start).unix();

//use unix function instead of difference
moment.unix(diff).format('hh:mm:ss')

This is a hack because the time diff is treated as a standard moment date, an early epoch date time, but it doesn't matter to our goal and you don't need any plugin

Aer

Answer 17

To format moment duration to string

var duration = moment.duration(86400000); //value in milliseconds
var hours = duration.hours();
var minutes = duration.minutes();
var seconds = duration.seconds();
var milliseconds = duration.milliseconds();

var date = moment().hours(hours).minutes(minutes).seconds(seconds).millisecond(milliseconds);
if (is12hr){
    return date.format("hh:mm:ss a");
}else{
    return date.format("HH:mm:ss");
}

Fatshan

Answer 18

if you use angular add this to your filters:

.filter('durationFormat', function () {
    return function (value) {
        var days = Math.floor(value/86400000);
        value = value%86400000;
        var hours = Math.floor(value/3600000);
        value = value%3600000;
        var minutes = Math.floor(value/60000);
        value = value%60000;
        var seconds = Math.floor(value/1000);
        return (days? days + ' days ': '') + (hours? hours + ' hours ': '') + (minutes? minutes + ' minutes ': '') + (seconds? seconds + ' seconds ': '')
    }
})

usage example

<div> {{diff | durationFormat}} </div>

Elderberry

Very nice indeed. I was looking for a 'pretty format' like this. Thanks! – Mcclary

Answer 19

My solution that does not involve any other library and it works with diff > 24h

var momentInSeconds = moment.duration(n,'seconds')
console.log(("0" + Math.floor(momentInSeconds.asHours())).slice(-2) + ':' + ("0" + momentInSeconds.minutes()).slice(-2) + ':' + ("0" + momentInSeconds.seconds()).slice(-2))

Demetria

Answer 20

How to correctly use moment.js durations? | Use moment.duration() in code

First you need to import moment and moment-duration-format.

import moment from 'moment';
import 'moment-duration-format';

Then, use duration function. Let us apply the above example: 28800 = 8 am.

moment.duration(28800, "seconds").format("h:mm a");

🎉Well, you do not have above type error. 🤔Do you get a right value 8:00 am ? No…, the value you get is 8:00 a. Moment.js format is not working as it is supposed to.

💡The solution is to transform seconds to milliseconds and use UTC time.

moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a')

All right we get 8:00 am now. If you want 8 am instead of 8:00 am for integral time, we need to do RegExp

const time = moment.utc(moment.duration(value, 'seconds').asMilliseconds()).format('h:mm a');
time.replace(/:00/g, '')

Incult

Answer 21

How about native javascript?

var formatTime = function(integer) {
    if(integer < 10) {
        return "0" + integer; 
    } else {
        return integer;
    }
}

function getDuration(ms) {
    var s1 = Math.floor(ms/1000);
    var s2 = s1%60;
    var m1 = Math.floor(s1/60);
    var m2 = m1%60;
    var h1 = Math.floor(m1/60);
    var string = formatTime(h1) +":" + formatTime(m2) + ":" + formatTime(s2);
    return string;
}

Suter

Answer 22

Use moment-duration-format.

Client Framework (ex: React)

import moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);

const breakLengthInMinutes = moment.duration(breakLengthInSeconds, 's').format('m');

Server (node.js)

const moment = require("moment-timezone");
const momentDurationFormatSetup = require("moment-duration-format");

momentDurationFormatSetup(moment);

const breakLengthInMinutes = moment.duration(breakLengthInSeconds, 's').format('m');

Frayda

Answer 23

moment.duration(x).format() has been deprecated. You can usemoment.utc(4366589).format("HH:mm:ss") to get the desired response.

console.log(moment.utc(4366589).format("HH:mm:ss"))

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Thales

Answer 24

Just moment.js without any other plugins

moment().startOf('day').seconds(duration).format('HH:mm:ss')

Horary

Answer 25

const duration = moment.duration(62, 'hours');
const n = 24 * 60 * 60 * 1000;
const days = Math.floor(duration / n);
const str = moment.utc(duration % n).format('H [h] mm [min] ss [s]');
console.log(`${days > 0 ? `${days} ${days == 1 ? 'day' : 'days'} ` : ''}${str}`);

Prints:

2 days 14 h 00 min 00 s

Mikey

Answer 26

There is no longer (if there ever was) any need to convert duration to utc to solve this issue. This is like converting a base10 "1" to binary and then saying that since output "1" looks like base10 we'll have no issues assuming this is a base10 value for any further operations.

Use moment-duration-format and note that with { trim: false } you can prevent trimming:

moment.duration(1000000, "seconds").format("hh:mm:ss", { trim: false })
> "277:46:40"
moment.duration(0, "seconds").format("hh:mm:ss", { trim: false })
> "00:00:00"

Let's compare this with the not recommended method of using abusing utc:

moment.utc(moment.duration(1000000, "seconds").asMilliseconds()).format('HH:mm:ss')
> "13:46:40"

Homothallic

Answer 27

import * as moment from 'moment'
var sleep = require('sleep-promise');

(async function () {
    var t1 = new Date().getTime();
    await sleep(1000); 
    var t2 = new Date().getTime();
    var dur = moment.duration(t2-t1); 
    console.log(`${dur.hours()}h:${dur.minutes()}m:${dur.seconds()}s`);
})();

0h:0m:1s

Cigarette

Answer 28

You can use numeral.js to format your duration:

numeral(your_duration.asSeconds()).format('00:00:00') // result: hh:mm:ss

Encephalograph

Answer 29

This can be used to get the first two characters as hours and last two as minutes. Same logic may be applied to seconds.

/**
     * PT1H30M -> 0130
     * @param {ISO String} isoString
     * @return {string} absolute 4 digit number HH:mm
     */

    const parseIsoToAbsolute = (isoString) => {
    
      const durations = moment.duration(isoString).as('seconds');
      const momentInSeconds = moment.duration(durations, 'seconds');
    
      let hours = momentInSeconds.asHours().toString().length < 2
        ? momentInSeconds.asHours().toString().padStart(2, '0') : momentInSeconds.asHours().toString();
        
      if (!Number.isInteger(Number(hours))) hours = '0'+ Math.floor(hours);
    
      const minutes = momentInSeconds.minutes().toString().length < 2
        ? momentInSeconds.minutes().toString().padEnd(2, '0') : momentInSeconds.minutes().toString();
    
      const absolute = hours + minutes;
      return absolute;
    };
    
    console.log(parseIsoToAbsolute('PT1H30M'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Pitchblack

If you insert the code as a snippet, you will be able to test the method and show some output to the console. – Interject

Sure thing! Just updated with snippet for quick tests. – Cisneros

Answer 30

as of 2017 onwards we can just use padStart(2, "0") https://www.w3schools.com/jsref/jsref_string_padstart.asp

just consider that this as is just grabs the seconds, so if you have 0s but up to 999ms left, this shows zero obviously. also you obviously have to know at least what values are possible and include them. for me my app won't ever handle a day+ so I'm fine.

function duration_formater(duration) {
  
  // get the values from the passed duration object
  values = [duration.hours(), duration.minutes(), duration.seconds()];

  // convert numbers to strings and add leading zeros until we have two characters
  values.forEach((element, i) => {
    values[i] = element.toString().padStart(2, "0");
  });

  // return a the values as "HH:mm:ss"
  return values[0] + ":" + values[1] + ":" + values[2];
};

I think thats the second best solution as it's flexible to modify to your liking.

Best one is of course another / different library as this would account for all possible cases and handle everything you throw at it => bugs are impossible.

Feoffee

Answer 31

If you use Angular >2, I made a Pipe inspired by @hai-alaluf answer.

import {Pipe, PipeTransform} from "@angular/core";

@Pipe({
  name: "duration",
})

export class DurationPipe implements PipeTransform {

  public transform(value: any, args?: any): any {

    // secs to ms
    value = value * 1000;
    const days = Math.floor(value / 86400000);
    value = value % 86400000;
    const hours = Math.floor(value / 3600000);
    value = value % 3600000;
    const minutes = Math.floor(value / 60000);
    value = value % 60000;
    const seconds = Math.floor(value / 1000);
    return (days ? days + " days " : "") +
      (hours ? hours + " hours " : "") +
      (minutes ? minutes + " minutes " : "") +
      (seconds ? seconds + " seconds " : "") +
      (!days && !hours && !minutes && !seconds ? 0 : "");
  }
}

Greece

Answer 32

This works for me:

moment({minutes: 150}).format('HH:mm') // 01:30

Giffin

Return "Invalid date" – Kiddush

150 minutes is not 1 hour 30 minutes. – Also