Calculating age from date(s) in a collection

Design help Custom code
1

Hey there (hardcore or just savvy) javascript peeps. I’m in need of some help with using a date(s) from a collection to calculate an age.

The calculation is based on an if/else scenario:

If date1, calculate years from date1 until todays date...
Else, calculate years between date1 and date2

The dates for calculation will be pulled from two fields in a collection, the date of birth and the date of their passing.

I have attached a screenshot of the how it will display. The actual dates will be hidden from view. Here’s my share link:
https://preview.webflow.com/preview/kidsrgolden?preview=b73ba7f731b9d81afe806302e16bd3bf

And heres a link to the live WIP site:
http://kidsrgolden.webflow.io/inspirational-kids![helpr_file-date_age_calc|690x497](upload://kZat37hhFp4MqbCmE50RSNy9Qqq.png)

Thanks so much and cheers!

Snapper

2

You should give div/text blocks a class instead of leaving them blank.

3

Thanks for the heads up @samliew. There is always a method to my madness. I won’t be naming those containers until I have the functionality I need. The naming convention gets tied to the javascript functionality to make it easier to connect the classes to the javascript code when updating and troubleshooting.

You’ll probably find a few more of those depending on how deep you go in the site.

4

Yes, without those classes I can’t suggest the JavaScript code you need.

5

Gotcha sorry, I’ve updated it. Thanks for looking into it for me :relaxed:

6 
const yearInMs = 365 * 24 * 60 * 60 * 1000;
$('.child-set_content_age_number').text(function() {
  const dob = $(this).parents('.child-set_content').find('.child-set_content_dob').text();
  return Math.ceil((Date.now() - new Date(dob)) / yearInMs);
});
7

Almost perfect! The only issue is that it’s not calculating the time if the second date (Date of passing in the collection) is present. I need it to calculate that date so it doesn’t show them aged if they’ve passed away. You can see an example of the date shown if you look at Brantley T’s or Jackson Y’s block on the main page.

I thought I could figure it out with an if/else statement, but tiny bit of javascript knowledge is proving :-1:

I’m going to keep trying, but any help you can offer would be great. Thanks again for making this happen. I thought to code would be much longer…well done!

8 
$('.child-set_content_age_number').text(function() {
  const item = $(this).parents('.child-set_content');
  const dob = $('.child-set_content_dob', item).text();
  const dop = $('.child-set_content_dop', item).text();
  return Math.ceil(((dop ? new Date(dop) : Date.now()) - new Date(dob)) / 31536000000);
});
9

Okay…it’s calculating, but for some reason it’s missing their actual age by 1 year. Take a look at the page. I thought maybe it was calculating to the year, but not taking the actual day into account, but look at kids with birthdays already past (Ira F., Jace G. etc), their ages are calculating as if it’s 2019.

10

It’s past 9 March this year, but not yet July 21. I’m rounding-up with Math.ceil. Perhaps you can change it to Math.floor instead.

1 Like
11

@samliew…You have no idea how much I appreciate this. Making that suggested change gave me exactly what I needed. It works perfect and will be a huge help to simplify things for our client.

Thanks again for all your help.

Cheers
—Snap