Comment afficher l'âge d'un champ de sélection de date ?

Introduction

Souhaitez-vous afficher l'âge d'une personne à partir d'un champ de sélection de date dans votre formulaire ? Ce tutoriel vous explique comment créer un formulaire qui recueille une date de naissance (DOB), puis utilise JavaScript pour calculer et afficher :

• Leur âge aujourd'hui
• Leur âge à une date future (ou passée) spécifique

Création du formulaire

Commençons par créer un nouveau formulaire et par ajouter nos champs. Veillez à inclure au moins un champ Date.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Ajout du champ HTML

Comme notre but ultime est de présenter l'âge une fois que la date d'anniversaire est sélectionnée, ajoutons une fonction HTML (champ). À l'intérieur de ce champ, nous intégrerons une barre HTML vide, à laquelle nous attribuerons la classe "âge". Ce span vide servira d'espace réservé, qui affichera l'âge de manière dynamique dès que le champ de sélection de date saisira la sélection de l'utilisateur.
<span class="age"></span>

Ajout du snippet

Ajoutez l'un des extraits ci-dessous à votre site.

Chaque extrait recherche un élément spécifique. ID du formulaire et ID du champ Date (exemple : 3535_9). Mettez à jour ces identifiants afin qu'ils correspondent à votre formulaire et à votre champ.

Option 1 : Afficher l'âge à la date d'aujourd'hui

/**
 * 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 today as the current date
			var today = new Date();

			// Set the DOB as the selected date of birth
			var DOB = selectedDates[0];

			// Calculate age in ms, then convert to years
			var age = today.getTime() - DOB.getTime();
			age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));

			// Build and display message
			var totalMessage = 'Your age is ' + age;
			jQuery('.age').text(totalMessage);
		}
	}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age', 10 );

Option 2 : Afficher l'âge à une date spécifique de votre choix (âge futur)

Utilisez cette option lorsque vous souhaitez connaître l'âge à une date cible fixe, par exemple « le 9 mai 2026 ». Cela est utile dans des situations telles que les admissions scolaires ou les vérifications d'éligibilité, où vous devez connaître l'âge d'une personne à une date précise.

Mettre à jour le TARGET_DATE valeur à la date qui vous convient.

/**
 * Calculate age as of a specific target date based on selected date of birth
 */
function wpf_dev_check_future_age() {
?>
<script>
jQuery(function($) {

	// Update the 3535_9 to match the form and field ID
	window.wpforms_3535_9 = window.wpforms_3535_9 || {};
	window.wpforms_3535_9.datepicker = {
		mode: "single",
		onClose: function(selectedDates, dateStr, instance) {

			// Fixed target date (YYYY-MM-DD)
			var TARGET_DATE = new Date('2026-05-09T00:00:00');

			// Selected Date of Birth
			var DOB = selectedDates[0];

			// If DOB is missing, do nothing
			if (!DOB) {
				return;
			}

			// Calculate age as of target date
			var age = TARGET_DATE.getTime() - DOB.getTime();

			// Convert ms → years
			age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));

			// Build message
			var totalMessage = 'Your age on May 9, 2026 will be ' + age;

			// Output into the HTML span with class "age"
			jQuery('.age').text(totalMessage);
		}
	}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_check_future_age', 10 );

• La « date cible » peut être dans le futur ou dans le passé, et le calcul reste valable.
• Si vous préférez ne pas coder en dur la date dans le message, vous pouvez créer le message à partir du TARGET_DATE variable à la place.

C'est tout ce dont vous avez besoin pour calculer l'âge à partir d'un champ de sélection de date. Vous souhaitez également modifier la position de la fenêtre contextuelle de sélection de la date ? Jetez un coup d'œil au didacticiel intitulé Comment modifier la position de la fenêtre contextuelle du sélecteur de date.

Référence

Référence de l'action : wpforms_wp_footer