Display Date As Time Passed / Time Ago (e.g. 5 mins ago)

AlexManyeki · October 3, 2017, 5:03pm

I saw this in a recent post request and also on the wishlist so here is a code snippet to help with that;

I have also created a page on http://clickart-sandbox.webflow.io/from-now-date and you can inspect the structure here;
https://preview.webflow.com/preview/clickart-sandbox?preview=12fc9727e24266f2bbf2ae95da83ba19 (TIME AGO page)

Paste this into the before </body> section of custom code;

<script>
  function timePast(curr, prev) {
    //define the milliseconds in every time unit
    var msMin = 60 * 1000;
    var msHr = msMin * 60;
    var msDay = msHr * 24;
    var msMonth = msDay * 30;
    var msYr = msDay * 365;

    //get elapsed time in milliseconds
    var elapsed = curr - prev;

    if (elapsed < msMin) {
      return Math.round(elapsed/1000) + ' seconds ago';
    }
    else if (elapsed < msHr) {
      var elapsed = Math.round(elapsed/msMin);
      if (elapsed === 1) {        // Show singular or plural depending on return value
        return elapsed + ' minute ago';
      } else {
        return elapsed + ' minutes ago';
      }
    }
    else if (elapsed < msDay) {
      var elapsed = Math.round(elapsed/msHr);
      if (elapsed === 1) { 
        return elapsed + ' hour ago';
      } else {
        return elapsed + ' hours ago';
      }
    }
    else if (elapsed < msMonth) {
      var elapsed = Math.round(elapsed/msDay);
      if (elapsed === 1) {
        return elapsed + ' day ago';
      } else {
        return elapsed + ' days ago';
      }   
    }
    else if (elapsed < msYr) {
      var elapsed = Math.round(elapsed/msMonth);
      if (elapsed === 1) {
        return elapsed + ' month ago';
      } else {
        return elapsed + ' months ago';
      } 
    }
    else {
      var elapsed = Math.round(elapsed/msYr);
      if (elapsed === 1) {
        return elapsed + ' year ago';
      } else {
        return elapsed + ' years ago';
      }
    }
  }

  $('.post-date').each(function() { //replace '.post-date' with your date's class
    var now = new Date();
    var parsedTime = Date.parse($(this).text());
    $(this).text(timePast(now, new Date(parsedTime)));
  });

</script>

Nita · October 3, 2017, 8:31pm

Great stuff Alex! Thanks for sharing!

RoseWebStudio · October 4, 2017, 5:35am

Excellent, thank you so much that has really helped me out. I owe you a beer…cheers

RoseWebStudio · October 5, 2017, 1:28pm

Hi ya, this works like a treat my friend…how can I also do it so it displays weeks? Thanks again

AlexManyeki · October 5, 2017, 3:58pm

Sure here you go;

<script>
    function timePast(curr, prev) {
     //define the milliseconds in every time unit
     var msMin = 60 * 1000;
     var msHr = msMin * 60;
     var msDay = msHr * 24;
     var msWeek = msDay * 7;                    //new week variable
     var msMonth = msDay * 30;
     var msYr = msDay * 365;

     //get elapsed time in milliseconds
     var elapsed = curr - prev;

     if (elapsed < msMin) {
      return Math.round(elapsed / 1000) + ' seconds ago';
     } else if (elapsed < msHr) {
      var elapsed = Math.round(elapsed / msMin);
      if (elapsed === 1) {                      // Show singular or plural depending on returned value
       return elapsed + ' minute ago';
      } else {
       return elapsed + ' minutes ago';
      }
     } else if (elapsed < msDay) {
      var elapsed = Math.round(elapsed / msHr);
      if (elapsed === 1) {
       return elapsed + ' hour ago';
      } else {
       return elapsed + ' hours ago';
      }
     } else if (elapsed < msWeek) {
      var elapsed = Math.round(elapsed / msDay);
      if (elapsed === 1) {
       return elapsed + ' day ago';
      } else {
       return elapsed + ' days ago';
      }
     } else if (elapsed < msMonth) {
      var elapsed = Math.round(elapsed / msWeek);
      if (elapsed === 1) { // Check for week
       return elapsed + ' week ago';
      } else {
       return elapsed + ' weeks ago';
      }
     } else if (elapsed < msYr) {
      var elapsed = Math.round(elapsed / msMonth);
      if (elapsed === 1) {
       return elapsed + ' month ago';
      } else {
       return elapsed + ' months ago';
      }
     } else {
      var elapsed = Math.round(elapsed / msYr);
      if (elapsed === 1) {
       return elapsed + ' year ago';
      } else {
       return elapsed + ' years ago';
      }
     }
    }

    $('.post-date').each(function() {               //replace '.post-date' with your date's class
     var now = new Date();
     var parsedTime = Date.parse($(this).text());
     $(this).text(timePast(now, new Date(parsedTime)));
    });
</script>

RoseWebStudio · October 5, 2017, 6:41pm

You are an absolute star!!! Thank you

AlexManyeki · October 5, 2017, 8:10pm

Glad to know it worked out well.

DomenVi · March 25, 2019, 3:11pm

@AlexManyeki hey alex, I’m having trouble showing how many minutes ago… actually, the shortest period of time I got it going was the last day. What should I do?

AlexManyeki · March 25, 2019, 4:05pm

hey @DomenVi

please share your published link and page. I can inspect and get back to you.

DomenVi · March 25, 2019, 4:09pm

Ah, of course.

Public URL:
https://www.travelicious.io/feed

Webflow URL (check “FEED”)

Thanks!

AlexManyeki · March 25, 2019, 9:37pm

Hey @DomenVi

Looks like you are using the wrong format e.g. March 25th, 2019 which cant be parsed properly.

Set the date as shown below and you should be good;

Admin note: sorry, the image had to be removed due to the issues with the image URL

DomenVi · March 26, 2019, 1:43am

Yup, that was it. Thanks so much!

juragan · November 19, 2019, 9:05am

HI Alex, thanks for sharing this!

I know its been a while back, but do you mind showing the way to change this to hour or day scale of time instead of month?

It would be much appreciated. Thanks!

I saw the webflow preview of yours but it seems it shows the exact time till seconds.

AlexManyeki · January 9, 2020, 12:43pm

UPDATED JAVASCRIPT ES6 Version. No need to use jQuery;

https://preview.webflow.com/preview/clickart-sandbox?utm_medium=preview_link&utm_source=designer&utm_content=clickart-sandbox&preview=12fc9727e24266f2bbf2ae95da83ba19&pageId=5e170a083f577b20aa048d57&mode=preview

<script>
  // Function to pluralize the time past (eg. minute or minutes / day or days)
  const pluralize = (count, noun, suffix = 's') => `${count} ${noun}${count !== 1 ? suffix : ''}`;

  const timePast = (curr, prev) => {
    const msMin = 60 * 1000, msHr = msMin * 60, msDay = msHr * 24, msMonth = msDay * 30, msYr = msDay * 365;
    let elapsed = curr - prev;

    if (elapsed < msMin) return pluralize(Math.round(elapsed/1000), 'second');
    else if (elapsed < msHr) {
      elapsed = Math.round(elapsed/msMin);
      return pluralize(elapsed, 'minute') 
    }
    else if (elapsed < msDay) {
      elapsed = Math.round(elapsed/msHr);
      return pluralize(elapsed, 'hour')
    }
    else if (elapsed < msMonth) {
      elapsed = Math.round(elapsed/msDay);
      return pluralize(elapsed, 'day') 
    }
    else if (elapsed < msYr) {
      elapsed = Math.round(elapsed/msMonth);
      return pluralize(elapsed, 'month') 
    }
    else {
      elapsed = Math.round(elapsed/msYr);
      return pluralize(elapsed, 'year') 
    }
  }

  let now = new Date();

  document.querySelectorAll('.post-date').forEach(box => {
    let parsedTime  = Date.parse(box.innerText);
    box.innerText = timePast(now, new Date(parsedTime)) + ' ago';
  })
</script>

You can copy this into an embed component at the end of the body like below and the formatted date will be processed before the page is rendered in the browser;

AlexManyeki · January 9, 2020, 12:49pm

Hey @juragan

Better late than never right?

For your case;

<script>
  // Function to pluralize the time past (eg. minute or minutes / day or days)
  const pluralize = (count, noun, suffix = 's') => `${count} ${noun}${count !== 1 ? suffix : ''}`;

  const timePast = (curr, prev) => {
    const msHr = 60 * 1000 * 60, msDay = msHr * 24;
    let elapsed = curr - prev;

    if (elapsed < msDay) {
      elapsed = Math.round(elapsed/msHr);
      return pluralize(elapsed, 'hour')
    } else {
      elapsed = Math.round(elapsed/msDay);
      return pluralize(elapsed, 'day') 
    }
  }

  let now = new Date();

  document.querySelectorAll('.post-date').forEach(box => {
    let parsedTime  = Date.parse(box.innerText);
    box.innerText = timePast(now, new Date(parsedTime)) + ' ago';
  })
</script>

juragan · January 6, 2021, 1:41pm

Thanks Alex.
This is really helpful. It works on my design.

But somehow it calculated wrongly, the post should have been less than 30 days (Dec 5 - Jan 6), but it shows 19 years ago .

Any idea which part am I missing?

AlexManyeki · January 6, 2021, 1:58pm

Very welcome @juragan

Please share your published site page.

EricLl · December 3, 2021, 7:57am

Works perfectly. Thanks mate!

PiotrDk · January 26, 2022, 2:48pm

@AlexManyeki thanks for the code. Any chance you could tell me how to get rid of the pluralize function and the “ago” suffix? I just want to have a plain “1d” (-> for “1 day ago”) format, without any spaces.

AlexManyeki · February 12, 2022, 9:09am

@PiotrDk

Did you manage to figure this out?

If not;

Remove this line;
const pluralize = (count, noun, suffix = ‘s’) => '${count} ${noun}${count !== 1 ? suffix : ‘’}`;
Replace of these lines as follows;
r̶e̶t̶u̶r̶n̶ ̶p̶l̶u̶r̶a̶l̶i̶z̶e̶(̶e̶l̶a̶p̶s̶e̶d̶,̶ ̶’̶h̶o̶u̶r̶’̶)̶ return elapsed + ‘h’
r̶e̶t̶u̶r̶n̶ ̶p̶l̶u̶r̶a̶l̶i̶z̶e̶(̶e̶l̶a̶p̶s̶e̶d̶,̶ ̶’̶d̶a̶y̶’̶)̶ return elapsed + ‘d’