Streaming live at 10am (PST)

Show No of days a blog was posted

Hi guys,

Want to show numbers of days ago say a blog was posted or house was listed. So that it says something like “posted 3 days ago” or “listed 5 days ago”. I know i need to do a date difference between today/current date and published date but really have no idea how to write this code in javascript. Anyone able to help?

How would first format the current date on your webflow project ?

2019 12/01 ?
01 december 2019 ?
01.12.19 ?

December 12, 2019.

But seeing that the published date comes with time would I have to format the current date similar to it to make possible?

Well if you use a YY/MM/DD format, you could use this quick little vanilla JavaScriptsnipet to perform the difference between the two dates:

HTML

<div id="published">2019/12/01</div>
<div id="elapsed"></div>

JavaScript

(function difference() {
  // 🧠 helpers
  const log = console.log;
  const oneDay = 24 * 60 * 60 * 1000; // in milliseconds

  // 🧠 get published date
  const published = document.getElementById("published").innerHTML;
  const array = published.split("/");
  const firstDate = new Date(array[0], array[1], array[2]);
  log(array);

  // 🧠 get current date
  const currentDate = new Date();
  const year = currentDate.getFullYear();
  const month = currentDate.getMonth() + 1;
  const day = currentDate.getDate();
  const secondDate = new Date(year, month, day);
  log(year, month, day);
  
  // 🧠 get days difference
  const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
  log(diffDays);

  // 🧠 inject difference value back into HTML
  const elapsed = document.getElementById("elapsed");
  elapsed.innerHTML = `posted ${diffDays} days ago`;
})();

Codepen here

Hope that helps !

Wow Anthony, thanks it almost works. It only displays for the first item and the rest has nothing to it. You can see in the attached image or see on the all-properties page: https://preview.webflow.com/preview/ghlpropertyservices?utm_medium=preview_link&utm_source=designer&utm_content=ghlpropertyservices&preview=e176c37f0ccef0f8450193c30b200baf&pageId=5deadd4b675ba8fee972c1e8&mode=preview

Also because I am using the CMS and the published date would be dynamic, how do change the static “2019/12/01” and use a dynamic field

Should you have several post to update, you could create an array of all your published date and loop through it via a for loop function.

To replace the static 2019/12/01, simply use a Webflow custom field as shown here: https://university.webflow.com/article/how-to-use-dynamic-embeds-on-your-webflow-site

Thanks Anthony, not sure how to do a for loop function, an example will be helpful if you can please.

Regarding the custom field, when i use it this is what i get…see below. is it possible the format of the published date from needs to converted to similar to 2019/12/01?

You could try format like this:

You don’t even need embed for the current date, juste use a regular text field and inject the correctly formated date via your collection list as shown in the screen shot.

Here is a for loop example:
https://www.w3schools.com/js/js_loop_for.asp

Thanks Anthony,

Dates functioning now, only need to figure out the for loop part.

Thanks very much. Will update you.