Moment.js from now / today in Days, Months & Years Ago

Question

I am using moment.js to show the time elapsed from 'today' to when a post(s) was published, for any post with the original ISO date '.iso-date' and then output the amount of time from the post in a div '.display-date'. I have a script that works ok, but it only shows 'years' and if the post is today then it outputs nothing. Similarly, it only shows months and then years after the first 12 months, so 1-11 months and then only x years ago.

Current output 'Posted 3 months ago', 'Posted a year ago', 'Posted e years ago' etc

So what I want to see is something like 'Posted Just Now', 'Posted Today', 'Posted 6 days ago', 'Posted 3 weeks, 5 days ago', Posted 9 months, 3 weeks, 5 days ago' and 'Posted 3 years, 9 months, 3 weeks, 5 days ago ' - or perhaps just 'the nearest date interval'.

Markup Example

<div class="posts-list">

<div class="grid-block">
<div class="iso-date">2019-09-30</div>
<div class="display-date"></div>
</div>

<div class="grid-block">
<div class="iso-date">2020-07-12</div>
<div class="display-date"></div>
</div>

</div>

Here is the current script:-

// Moment 
$(document).ready(function () {

// Moment targets
  var publishedDate = ".iso-date";
  var displayDate = ".display-date";
  
  $(publishedDate).each(function (i, e) {
  
    var p = $(e).text();
    var a = $(e).next(displayDate);
    
    if (moment(p).isValid()) {
    
   var m = moment(new Date(p));
   var s = moment(new Date(m)).fromNow();
    // var s = moment(new Date(m)).diff(moment(), 'milliseconds');  

      a.text("Posted " + s);
    }

  });

});

I would appreciate your input on how to achieve this with Moment.js r perhaps without any script dependencies - jQuery / JavaScript.

Thanks

Glennyboy

Answer 1

Check the below snippets. I used this answer from here and implemented it as per your requirements.

function dateAgo(date) {  

    var startDate = new Date( date + " " + '12:00 AM');
    var endDate = new Date();

    var diffDate  = new Date(new Date() - startDate);

    var yearDiff  = diffDate.toISOString().slice(0, 4) - 1970;
    var monthDiff = diffDate.getMonth(); 
    var dayDiff   = diffDate.getDate()-1;

    var msec  = endDate - startDate;
    var mins  = Math.floor(msec / 60000);
    var hrs   = Math.floor(mins / 60);
    var days  = Math.floor(hrs / 24);
      
    var label = 'Posted ';
    if( mins <= 30 ){
        label += ' Just Now';
    }else if( hrs <= 24 ){
        label += ' Just Today';
    }else{
        if( yearDiff > 0  ){
            label += ( yearDiff > 1 ) ? yearDiff+' years, ' : yearDiff+' year, ';
        }

        if( monthDiff > 0 ){
            label += ( monthDiff > 1 ) ? monthDiff+' months, ' : monthDiff+' month, ';
        }

        if( dayDiff > 0 ){
            label += ( dayDiff > 1 ) ? dayDiff+' days ' : dayDiff+' day ';
        }

        label += 'ago';
    }
  
    return label;   
    
}

(function() {
    var elements = document.body.getElementsByClassName('iso-date');
    for (var i = 0; i < elements.length; i++) {
        var date  = elements[i].innerHTML;
        var label = dateAgo(date);
        elements[i].nextElementSibling.innerHTML = label;   
    }
})();

<div class="grid-block">
<div class="iso-date">2019-09-30</div>
<div class="display-date"></div>
</div>

<div class="grid-block">
<div class="iso-date">2021-04-06</div>
<div class="display-date"></div>
</div>