How to Display the Age From a Date Picker Field

Introduction

Would you like to display the age from a date picker field in your form? In this concise guide, we’ll walk you through creating a form that collects the date of birth through a date picker field. Moreover, we’ll demonstrate how to leverage JavaScript to effortlessly calculate and exhibit the person’s age in another section of the form. Let’s proceed with the step-by-step instructions!

Creating the form

Let’s begin by creating a new form and adding our fields. Be sure to include at least one Date field.

If you need help in creating your form, please review this documentation.

Adding the HTML field

As our ultimate goal is to present the age once the birthday is selected, let’s add an HTML field. Within this field, we’ll embed an empty HTML span, which will be assigned a class of “age.” This empty span will serve as a placeholder, which will showcase the age dynamically as soon as the date picker field captures the user’s selection.
<span class="age"></span>

Adding the snippet

Now it’s time to add the snippet that will pull all this together. If you need help in how and where to add snippets to your site, please see this helpful guide.

/**
 * Calculate age based on date of birth date picker field
 *
 * @link https://wpforms.com/developers/how-to-display-the-age-from-a-date-picker-field/
 */
function wpf_dev_check_age() {
?>
 
<script>
    jQuery(function($) {
 
        // Update the 3535_9 to match the form and field ID 
        // of your form and date picker field
        window.wpforms_3535_9 = window.wpforms_3535_9 || {};
        window.wpforms_3535_9.datepicker = {
             
            mode: "single",
            onClose: function(selectedDates, dateStr, instance) {
				// Set the today date as the current date
 				var today = new Date();
				// Set the DOB as the selected date of birth from
				// the date picker field
				var DOB = selectedDates[0];
				// Get the age by subtracting today's date from
				// the selected date of birth
				var age = today.getTime() - DOB.getTime();
				// Add a string to the message that will appear
				// showing the age
				var message = 'Your age is ';
				// Calculate the date from the age into "years old" 
                age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
				// Assign the message and age into a variable
				var totalMessage = message.concat(age);
				// Display the message into the empty span of "age"
				// inside the HTML field
                jQuery('.age').text(totalMessage);
 
            }
 
        }
         
    });
</script>
 
<?php
}
 
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age', 10 );

This snippet has many comments inside explaining each step. But it will look for the form ID 3535 and for the Date field ID of 9 and when that date is selected and the date picker popup closes, it will automatically make the calculation from the date entered, less the current date and formulate this difference into years to display in our empty HTML span with a class of age.

For the purpose of this documentation, our form ID is 3535 and the field ID for the Date field is 9. You’ll need to update these IDs in the snippet to match your own form and field IDs. If you need help in finding your IDs, please check out this documentation.

And that’s all you need to calculate the age from a date picker field. Would you like to also change the position of the date picker popup? Take a look at the tutorial on How To Change the Position of the Date Picker Popup.

Reference

Action Reference: wpforms_wp_footer