How to add leading zeros to the result of a date difference calculation, using moment.js?

One of the charms of the moment.js library is the perfect way it deals with sometimes having 366 days in a year 😉 and the varying length of monthes.

So I have assembled the following piece of code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js' type='text/javascript'></script>
<script type="text/javascript">

Date.getFormattedDateDiff = function(date1, date2) {
  var b = moment(date1),
      a = moment(date2),
      intervals = ['years','months','weeks','days','hours','minutes','seconds'],
      out = [];

  for(var i=0; i<intervals.length; i++){
      var diff = a.diff(b, intervals[i]);
      b.add(diff, intervals[i]);
      out.push('<div>' + diff + ' ' + intervals[i] + '</div><br/>');
  }
  return out.join(' ');
};

window.onload = function calculateInterval() {
   var start = moment("2013-09-04"),
       end   = moment();

   document.getElementById('output').innerHTML  
     = 'Time elapsed between "' + start.toISOString().split('T')[0]
     + '" and "' + end.toISOString().split('T')[0] + '":<br/><br/>' 
     + Date.getFormattedDateDiff(start, end);
}
</script>

<p><label id="output"></label></p>

A codepen can be found here …

Probably you will immediately notice that I am missing the leading zeros in the result. I have tried several formatting-efforts. But unfortunately, all of them don’t seem to work.

Any suggestions how to get the leading zeros in the result, so 07 years instead of 7 years, etc. are highly appreciated.

Answer

Simple if statement to prepend a 0 will work — typeof diff() value returns number and you need to convert to a string to manipulate.

Date.getFormattedDateDiff = function(date1, date2) {
  var b = moment(date1),
      a = moment(date2),
      intervals = ['years','months','weeks','days','hours','minutes','seconds'],
      out = [];

  for(var i=0; i<intervals.length; i++){
      var diff = a.diff(b, intervals[i]);
      b.add(diff, intervals[i]);
      if (diff.toString().length == 1) {
        diff = "0" + diff.toString();
      }
      out.push('<div>' + diff + ' ' + intervals[i] + '</div><br/>');
  }
  return out.join(' ');
};

window.onload = function calculateInterval() {
   var start = moment("2013-09-04"),
       end   = moment();

   document.getElementById('output').innerHTML  
     = 'Time elapsed between "' + start.toISOString().split('T')[0]
     + '" and "' + end.toISOString().split('T')[0] + '":<br/><br/>' 
     + Date.getFormattedDateDiff(start, end);
}

You can also refer to this thread for some fantastic leading 0 methods.

Leave a Reply

Your email address will not be published. Required fields are marked *