### [How to Display the Age From a Date Picker Field](https://wpforms.com/developers/how-to-display-the-age-from-a-date-picker-field/)

**Published:** August 2, 2023
**Author:** Umair Majeed

**Excerpt:** This tutorial will walk you through how to display the age from date picker field on your form. 

**Content:**

## Introduction

Would you like to display someone’s age based on a Date Picker field in your form? This tutorial walks you through creating a form that collects a date of birth (DOB) and then uses JavaScript to calculate and display:

- Their age **today**
- Their age **on a specific future (or past) date**

## Creating the form

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

![create your form and add all your fields including at least one date picker field](https://wpforms.com/wp-content/uploads/2023/08/wpforms-display-age-create-form.jpg)If you need help in creating your form, [please review this documentation](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form").

## 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.
``

![add an html field and inside that field add an empty HTML span with a class of age](https://wpforms.com/wp-content/uploads/2023/08/wpforms-display-age-html-field.jpg)## Adding the snippet

Add one of the snippets below to your site.

Each snippet looks for a specific **Form ID** and **Date field ID** (example: `3535_9`). Update those IDs to match your form and field.

#### Option 1: Display age as of today

```

/**
 * 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() {
?>

**Categories:** Tutorials

**Tags:** Date Time Field, Javascript, JS

---