Calculate Age using WIX Date Picker

Show and tell
,
1

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)

701×557 79.7 KB

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.

641×532 79.9 KB

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: WIX Ideas
Facebook Community Group: Wix Ideas Community | Facebook
Instagram: Wix Ideas (@wixideas) • Instagram photos and videos
Website: https://www.wixideas.com/
YouTube Channel: https://www.youtube.com/@wixideas

2

Moving this post to Tips, Tutorials, Examples .