â–Ľ
Streaming live at 10am (PST)

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

Community resources Webflow Tips
#1

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>
6 Likes
CMS Time calculation
Help with dates please
#2

Great stuff Alex! Thanks for sharing!

1 Like
#3

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

1 Like
#4

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

#5

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>
3 Likes
#6

You are an absolute star!!! Thank you :1st_place_medal:

1 Like
#7

Glad to know it worked out well. :+1:

#8

@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?

#9

hey @DomenVi

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

#10

Ah, of course.

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

Webflow URL (check “FEED”)

Thanks!

#11

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

1 Like
#12

Yup, that was it. Thanks so much! :wink:

1 Like
#13

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.

#14

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;

image
image2594Ă—1730 765 KB

1 Like
#15

Hey @juragan

Better late than never right? :sweat_smile:

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>
#16

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

Any idea which part am I missing?
image

#17

Very welcome @juragan

Please share your published site page.

#18

Works perfectly. Thanks mate!