Format Moment.js Duration

Question

I am using Moment.js to track the duration of an action in my app. Currently, I have the following code:

var startMoment = null;

var actionClock = null;
function startClock() {
  actionClock = setInterval(function(){ 
    if (startMoment === null) {
      startMoment = moment();
      $('#duration').text('00:00:00');
    } else {
      var now = moment();
      var span = moment.duration(now - startMoment);
      $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds());
    }
  }, 1000);     
}

function stopClock() {          
  clearInterval(actionClock);

      var now = moment();
      var span = moment.duration(now - startMoment);
      $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds());

  startMoment = null;
  actionClock = null;
}

My problem is, the format of duration is awkward. I want to display the duration as mm:ss.lll. In other words, always show two digits for the minutes, two digits for the seconds, and three digits for the milliseconds. Currently, I see durations printed like 1:2.45 . How do I format a duration created with Moment.js? If this is not possible, is there another library I should be using to track a duration and display it?

Thank you!

Answer 1

One way of doing this might be to convert your duration back into a moment (perhaps using milliseconds), and then using the moment's formatting.

moment.utc(span.asMilliseconds()).format('mm:ss.SSS');

 var startMoment = null, $durForm = $('#durationFormatted'); var actionClock = null; function startClock() { actionClock = setInterval(function() { if (startMoment === null) { startMoment = moment(); $('#duration').text('00:00:00'); $durForm.text('00:00.000'); } else { var now = moment(); var span = moment.duration(now - startMoment); $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds()); $durForm.text(moment(span.asMilliseconds()).format('mm:ss.SSS')); } }, 1000); } function stopClock() { clearInterval(actionClock); var now = moment(); var span = moment.duration(now - startMoment); $('#duration').text(span.minutes() + ':' + span.seconds() + '.' + span.milliseconds()); $durForm.text(moment(span.asMilliseconds()).format('mm:ss.SSS')); startMoment = null; actionClock = null; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <div>Duration (original): <span id='duration'></span> </div> <div>Formatted moment: <span id='durationFormatted'></span> </div> <button onClick='startClock()'>Start Clock</button> <button onClick='stopClock()'>Stop Clock</button> 

Answer 2

I had a similar issue in my project and thankfully, Lodash was already a dependency. I was able to use the _.padStart method to get there.

let yourHours = _.padStart(span.hours().toString(),2,'0');
let yourMinute = _.padStart(span.minutes().toString(),2,'0');
let yourSeconds = _.padStart(span.seconds().toString(),2,'0');