Calculate Age using WIX Date Picker

In this short example you will learn how to calculate age using WIX Date Picker element

PREVIEW EXAMPLE

My Elements

1. Date Picker

2. Text Element

I first edited my date picker input field by giving it a field title, setting my initial text to today's date and unchecking the 'Required Field' (Which you can check if your form or input requires it)

Next, I edited the calendar itself by toggling off the 'Show future dates'. Since it's a birthday we only need dates from the present and from the past.

I then added a text element that will display the new age when the calendar is changed.

NOTE: This text element is hidden onLoad. It is shown when the date picker is changed.

Then here comes the code. It is indeed a short example used to calculate age using the present year from the date object and subtracting it with the year picked by the user from the date picker.

$w.onReady(()=>{

$w("#datePickerID").onChange(()=>{

var todaysDate =newDate().getFullYear();//Current year
let inputDate =$w("#datePickerID).value;//Value from date picker

var inputDateYear = inputDate.getFullYear();

$w("#ageText").show();

$w("#ageText").text =`You are "${String(todaysDate - Number(inputDateYear))}" years old`'  

});
    });

Have any questions? https://www.wixideas.com/contact

Facebook Page: https://www.facebook.com/wixideas

Facebook Community Group: https://www.facebook.com/groups/wixideas

Instagram: https://www.instagram.com/wixideas/

Website: https://www.wixideas.com/

YouTube Channel: https://www.youtube.com/@wixideas