Calculate Age using CMS date field - Custom code

Hi!

I am tryin to get the age of the owners, I have a included a date field called “Birthday” and I wanted to calculate the age for each Owner its birthday.

What I did:

  • Add in “Before tag” the code
  • Add embed code in the page the same code
<script>
const anos = Birthday
function calculateAge(date) 
{
  const now = new Date();
  const diff = Math.abs(now - date );
  const age = Math.floor(diff / (1000 * 60 * 60 * 24 * 365)); 
  return age
}
calculateAge(anos) 
</script>

image

The result does not appear anywhere.

Could anyone help me on that? Basically to bring the results of Javascript into the page.

Here the link of the project:
https://preview.webflow.com/preview/2sami?utm_medium=preview_link&utm_source=designer&utm_content=2sami&preview=fe421a26feb7a834eca6c9ae79b44de2&pageId=627cd36ad95f1017d0b1ccb7&itemId=627cd386d87d48e3fabf221d&workflow=preview

Thanks!!

Hi @victorpaolo,

Welcome to the forum!

Try replacing it with this code:

<script>
const anos = new Date("+Add Field - Birthday HERE");
const now = new Date();
const diff = now-anos;
const age = Math.floor(diff/31557600000);
console.log(age)

document.querySelector('.ages').innerHTML = age;
</script>

It will display 0 if they are less than a year old obviously. Try publishing and testing it out on Eino Ratke.

1 Like

Hey mww!

Many thanks! it works perfectly!
Have a good day!

How can i make this work for all my cms items. For me it only works on the first one. I display a list of tenants per flat, and it will only calculate the age of the first person in the list. How can i fix this, is it posstible or do i need to do something different?

Hi @Aasen,

Send through your read-only link and I’ll take a look for you!

Hi @mww
https://preview.webflow.com/preview/mmj-eiendom-efeb6a49a9f0e30b21fb6d238cf?utm_medium=preview_link&utm_source=designer&utm_content=mmj-eiendom-efeb6a49a9f0e30b21fb6d238cf&preview=6a40b4634c8121d68a08decc44665d8e&pageId=63137015f75027ef77618a22&itemId=63137015f750274cf1618b00&workflow=preview

Thanks! I have been trying different methods to give each tenant a dynamic id or class, but i havent gotten it to work.

Hi @Aasen,

Try adding this code to the bottom of Page Settings > Footer Code:

<script>
const list = document.querySelectorAll('.dynamic-item')
for (i = 0; i < list.length; i++){
let alder = new Date(list[i].querySelector(".leietakeralder > h6.alder").innerHTML);
 
let now = new Date();
let diff = now-alder;
let age = Math.floor(diff/31557600000);

list[i].querySelector("#leietaker > h6.trip").innerHTML = age;
}
</script>

I’d recommend removing the HTML embeds from the collection items to ensure there’s no clashing of variables.

Let me know how you go!

WOW! It worked, thank you so much. Been a hard week trying different methods to get this to work, and then you do your magic and fixes everything. Thank you so much! And you are so fast, amazing! Have a wonderful day!

1 Like

Sorry, I need help for dummies. I can’t seem to get it to work. What do I have to do (step by step) to get this div called Birthday to calculate into an Age?
Bildschirm­foto 2022-10-07 um 12.20.52

https://preview.webflow.com/preview/test-36dc8d?utm_medium=preview_link&utm_source=dashboard&utm_content=test-36dc8d&preview=32b64ac7fbefacfcb302db837bbdc80f&workflow=preview

Hi @Niklas_Kruger,

  1. Add a div/text block with the id ‘age’ where you want the age to show up (demo here)

  2. Replace the code in Page Settings > Custom Code > Before </body> tag with the below:

<script>
const list = document.querySelectorAll('.w-dyn-item')
for (i = 0; i < list.length; i++){
let birthday = list[i].querySelector(".birthday").innerHTML
let from = birthday.split(".");
let birthdateTimeStamp = new Date(from[2], from[1] - 1, from[0]);
 
let now = new Date();
let diff = now-birthdateTimeStamp;
let age = Math.floor(diff/31557600000);

list[i].querySelector("#age").innerHTML = age;
}
</script>

  1. Republish your site
1 Like

thanks so much! So quick!

just one more question. Why does it not work on the underpage if you click on a model?

Hi @Niklas_Kruger,

You’ll need some different code for the Models CMS page, would you be able to send through your read-only link again and I’ll write some code for it?

Hey @mww , you are a true lifesaver!

https://preview.webflow.com/preview/jlc-archiv?utm_medium=preview_link&utm_source=dashboard&utm_content=jlc-archiv&preview=32b64ac7fbefacfcb302db837bbdc80f&workflow=preview

Thanks so much for our support! <3

Do you know how to show the age?

https://preview.webflow.com/preview/jlc-archiv?utm_medium=preview_link&utm_source=dashboard&utm_content=jlc-archiv&preview=32b64ac7fbefacfcb302db837bbdc80f&workflow=preview

Hi @Niklas_Kruger,

It should be showing in the published site right? It’s replacing the word ‘Age’ with the calculated age:

There it works, but it doesn’t work on the detailpames of the models.

Hi @Niklas_Kruger,

Sorry! I see - please replace code in Page Settings > Custom Code > Before </body> tag with the below on Models template page:

<script>
let birthday = document.querySelector(".birthday").innerHTML
let from = birthday.split(".");
let birthdateTimeStamp = new Date(from[2], from[1] - 1, from[0]);
 
let now = new Date();
let diff = now-birthdateTimeStamp;
let age = Math.floor(diff/31557600000);

document.querySelector("#age").innerHTML = age;

</script>

Perfect, Thanks so much!