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: Webflow - ghlpropertyservices
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: Overview dynamic content | Webflow University
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:
Thanks Anthony,
Dates functioning now, only need to figure out the for loop part.
Thanks very much. Will update you.
you can implement it for all cms item by following these images get id from cms by adding cms fields in code
