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