Streaming live at 10am (PST)

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

#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>
4 Likes
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>
2 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;

CloudApp

1 Like
#12

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

1 Like