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
Nita
(Sónia Alves)
October 3, 2017, 8:31pm
#2
Great stuff Alex! Thanks for sharing!
1 Like
Excellent, thank you so much that has really helped me out. I owe you a beer…cheers
1 Like
Hi ya, this works like a treat my friend…how can I also do it so it displays weeks? Thanks again
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
You are an absolute star!!! Thank you
1 Like
Glad to know it worked out well.
DomenVi
(Domen Kert)
March 25, 2019, 3:11pm
#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?
hey @DomenVi
please share your published link and page. I can inspect and get back to you.
DomenVi
(Domen Kert)
March 25, 2019, 4:09pm
#10
Ah, of course.
Public URL:
https://www.travelicious.io/feed
Webflow URL (check “FEED”)
Thanks!
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
DomenVi
(Domen Kert)
March 26, 2019, 1:43am
#12
Yup, that was it. Thanks so much!
1 Like
juragan
(juragan)
November 19, 2019, 9:05am
#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.
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;
1 Like
Hey @juragan
Better late than never right?
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>
juragan
(juragan)
January 6, 2021, 1:41pm
#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 .
Any idea which part am I missing?
Very welcome @juragan
Please share your published site page.
EricLl
(Eric LLouquet)
December 3, 2021, 7:57am
#18
Works perfectly. Thanks mate!
1 Like
PiotrDk
(Piotrek)
January 26, 2022, 2:48pm
#19
@AlexManyeki thanks for the code. Any chance you could tell me how to get rid of the pluralize function and the “ago” suffix? I just want to have a plain “1d” (-> for “1 day ago”) format, without any spaces.
@PiotrDk
Did you manage to figure this out?
If not;
Remove this line;
const pluralize = (count, noun, suffix = ‘s’) => '${count} ${noun}${count !== 1 ? suffix : ‘’}`;
Replace of these lines as follows;
r̶e̶t̶u̶r̶n̶ ̶p̶l̶u̶r̶a̶l̶i̶z̶e̶(̶e̶l̶a̶p̶s̶e̶d̶,̶ ̶’̶h̶o̶u̶r̶’̶)̶ return elapsed + ‘h’
r̶e̶t̶u̶r̶n̶ ̶p̶l̶u̶r̶a̶l̶i̶z̶e̶(̶e̶l̶a̶p̶s̶e̶d̶,̶ ̶’̶d̶a̶y̶’̶)̶ return elapsed + ‘d’
1 Like