Velo by Wix Tutorial: Calculate Visitor's Age By Using Date Picker User Input in Wix

"How to calculate visitor's age by using Date Picker element and Wix Velo" tutorial explains all neccessary steps you should take before you dive into the deep in this subject. You will be provided by code blocks and visualizations. Velo API reference is also used.

How to Calculate Ages Using The Date Picker Element in Wix?

In this tutorial, I have made a simple age calculator using Date Picker to calculate age from year selected. In this short tutorial, I will be sharing with you the elements used, the steps I took and most importantly, an explanation of the code I used in achieving this feature.

Calculating user age is one feature in Velo by WIX where one can think of utilizing at a point in time, especially, when collecting user information and generating data for the users.

Let allow visitors to calculate their ages automatically by using Date Picker element in Wix Velo. See this example on demo site and understand better.

1) Add Date Picker and Text Element onto the Page

I designed a layout to hold my Date Picker and Text element that displays the age after the date has been picked.

Box Element to hold Date Picker and Text Element

2) Set Date Picker Properly

Next, I added the Date Picker element on the box and edited the settings.

Edit Field Title

Do not show future dates

3) Display Age as a Text Element

Finally, I added the text element that will display the age after selecting the date.

The text element is hidden onLoad until the user chooses a date.

This text element is hidden onLoad

How to Write the Code for Date Picker Element?

In this section, I will be explaining the content of the code including the date methods I used.

$w.onReady(() => { 

});

I added an onReady function to run the code before the user starts interacting with the page.

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

});
});

Inside the onReady function is the onChange event for the Date Picker. This will enable the Date Picker feature to occur each time the user changes the date.

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

var todaysDate = new Date().getFullYear();

});
});

I then assigned a variable, todaysDate, to the date object new Date() .This object stands for the current day's time and date. In other to get the current year and not the full time and date, we utilize the getFullYear method.

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

var todaysDate = new Date().getFullYear();
let inputDate = $w("#datePickerID).value;

});
});

I assigned a variable to the date and time value from our date picker inputDate

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

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

});
});

Since our Date Picker also displays the current date and time, we then use the getFullYear() method to get only the year from our user's date input.

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

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

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

});
});

Remember we hid our text element initially until the user picks a date? Here, we call a show() method. This will allow the text element to display on the box after a date has been picked.

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

var todaysDate = new Date().getFullYear();

let inputDate = $w("#datePickerID).value;
var inputDateYear = inputDate.getFullYear();

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

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

});
});

Finally, we used Template Literals to display our result by combining our message with the actual value (Age). The message should say;

You are "AGE" years old

Where "AGE" is a value that stands for the actual age calculated.

Final Code

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

var todaysDate = new Date().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`'

});

});

Thank you for reading up to this point. If you have further questions, you can post on forum or get in contact with us.