Days Counter from Date (collection field)

Hi guys,

I would like to build a day counter starting from a date coming from a CMS collection date field.

Why: Employees of a company can choose since when they work in that company. On their profile we want to have a counter: “working for Company for XXX days already”.

E.g.:
Date picked: 12th Sept. 2022
Day counter output today (16th Sept. 2022): since 4 days.

Does somebody has an idea how to approach that?
Any tips are much appreciated!!!

Cheers and many thanks in advance!
Manuel

This is a very crude bit of script that I use to calculate years of service in the same way. You should be able to adapt it easily.

image

Insert your CMS date field in where I’ve put [ WEBFLOW-DATE-FIELD ].
You’ll need to research a bit to adjust the calculation to emit days.

<script>
$(function() {

// { WEBFLOW-DATE-FIELD }
const d = new Date("{ WEBFLOW-DATE-FIELD }");
var ageDate = new Date (Date.now() - d);

// Create text
var years = `${Math.abs(ageDate.getUTCFullYear() - 1970)} years`;

$("#years").html(years);

});
</script>

Hey Mike,

thanks for this fast answer! :pray:t3:
I tried your code and it worked as described.

While trying to adapt it for days output I came across another solution which I ended up using. :wink:

It works pretty good, the only problem I have is that it calculates only once for the first item in the collection list. Do you know what I have to change to have it run for every item?

This is the code I´m using:

<p id=" { wf-cms-field-name } "><!--this text will be replaced with the days result--></p>

<script>

let today = new Date().toISOString().slice(0, 10)

const startDate  = " { wf-cms-field-startdate } ";
const endDate    = today;

const diffInMs   = new Date(endDate) - new Date(startDate)
const diffInDays = diffInMs / (1000 * 60 * 60 * 24);

document.getElementById(" { wf-cms-field-name } ").innerHTML = Math.round(diffInDays);

</script>

The console says “Uncaught SyntaxError: Identifier ‘today’ has already been declared”.

Ok, makes sense. It can be declared only once within the same scope. But I don´t know how to approach this to change that. Not so fit with JS yet :roll_eyes:

Thanks again!
Manuel

In jQuery you’d use an .each() loop to walk through those elements and calculate the dates. It looks like you’ve switched to an inline HTML Embed approach instead, and I’m guessing you’re placing this where you want your output <p></p> to go.

In HTML, id’s are unique, so your getElementById won’t work the way you want. You’ll either need to create unique ID’s, or use a document.write, or another approach to attach your calculation. And, yes, repeating the variable declarations in every block will break too.

Most of the time I use jQuery for this purpose. The reason is that it lets me keep the designer space unpolluted, and to see and style those content elements precisely without HTML Embeds in the way.

If you share a readonly link to your site, I can have a look.

Hi Mike!

Thanks a lot for your response and thoughts.
Makes total sense what you write!

I managed to make it work with unique IDs for each item (with adding the wf-name-field), so now the result is how I need it. But as you describe, it´s probably not the smartest way to do, since it´s quite cluttered and I have basically the same calculation 30+ times in my code :sweat_smile:. If you feel like it, I´m very happy if you can have a look.

Here´s the read only link:
https://preview.webflow.com/preview/sichtwerk-relaunch?utm_medium=preview_link&utm_source=designer&utm_content=sichtwerk-relaunch&preview=f3b23e9023ae0f220e8b311b9b95fc12&pageId=63248937029fcfbedfde18c8&workflow=preview

Cheers!
Manuel

Nice work, there are dozens of ways to solve this kind of need, it’s fun to explore the options, and you’ll find that no matter what approach you go with, there is always a better way.

One tip- when you to emit a unique ID in a collection list, the slug is guaranteed to unique within that collection. Tack on a few characters and you can easily create something unique for your page, like button-{{slug}}

:raised_hands:t3:
Ya, using the slug makes more sense, if one of them would have the same name it would not work anymore, haha!
I was just also trying to somehow “outsource” today and endDay, since it´s the same for all items obviously, but I could not figure out how, it´s not available within the item code if I declare it e.g. in the head, is it?

However, thanks a lot for your time!
Enjoy the weekend!

Yes, in your approach where you have a script block inside of your Collection List, that code gets repeated since you’re effectively already “in” the loop ( of the Collection List generator itself ).

You can break out the setup code as another EMBED block and put it just before the collection list, or you can put it in your page or site HEAD.

By the way, this is why I primarily use jQuery- it provides an elegant way to keep all of that code together in one tight package. You set your variables and then perform your looping to apply your calculations and changed. Keeping it together means that code is easy to find later, when you come back to change something on this page in a year.

jQuery also has a lot of syntactical sugar that keeps it very readable. I like my code sweet. If you have spare time, you might try building a jQuery version of your solution just to see the differences.

1 Like

Here is another approach with plain JS function you try to run and it looks to me readable :wink:

let originDate = new Date(2022, 8, 18);

function sinceDate(originDate) {
	let today = new Date();
	let diffDays = today.getTime() - originDate.getTime();
	diffDays = Math.ceil(diffDays / (1000 * 60 * 60 * 24));
	return diffDays;
}

let diff = sinceDate(originDate);

console.log(diff);
1 Like

Hi Stan!

Great, thanks for this version – will try it out!

Cheers,
Manuel