Search code examples
javascriptmomentjsleading-zero

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.


Solution

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