â–Ľ
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>

Help with dates please
#2

Great stuff Alex! Thanks for sharing!


#3

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


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

#6

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


#7

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