Comment afficher l'âge à partir d'un champ sélecteur de date

Introduction

Souhaitez-vous afficher l’âge de quelqu’un à partir d’un champ Sélecteur de date dans votre formulaire ? Ce tutoriel vous guide dans la création d’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 ajouter nos champs. Assurez-vous d’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

Notre objectif final étant de présenter l’âge une fois l’anniversaire sélectionné, ajoutons un champ HTML. Dans ce champ, nous intégrerons un span HTML vide, auquel nous attribuerons la classe « age ». Ce span vide servira de marqueur, qui affichera dynamiquement l’âge dès que le champ sélecteur de date capturera la sélection de l’utilisateur.
<span class="age"></span>

Ajout du snippet

Ajoutez l’un des extraits ci-dessous sur votre site.

Chaque extrait recherche un ID de formulaire et un ID de champ de date spécifiques (exemple : 3535_9). Mettez à jour ces ID pour 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 ceci lorsque vous souhaitez connaître l’âge à une date cible fixe, par exemple « 9 mai 2026 ». Ceci est utile pour des scénarios tels que les admissions scolaires ou les vérifications d’éligibilité, où vous devez savoir quel âge aura quelqu’un à une date précise.

Mettez à jour la valeur TARGET_DATE avec la date dont vous avez besoin.

/**
 * 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 fonctionne toujours.
• Si vous préférez ne pas coder en dur la date dans le message, vous pouvez construire le message à partir de la variable TARGET_DATE à la place.

Et c’est tout ce dont vous avez besoin pour calculer l’âge à partir d’un champ sélecteur de date. Souhaitez-vous également modifier la position de la fenêtre contextuelle du sélecteur de date ? Jetez un œil au tutoriel sur Comment modifier la position de la fenêtre contextuelle du sélecteur de date.

Référence

Référence d'action : wpforms_wp_footer