How to Display the Age From a Date Picker Field

Introduzione

Desideri visualizzare l'età di qualcuno in base a un campo Date Picker nel tuo modulo? Questo tutorial ti guiderà nella creazione di un modulo che raccoglie una data di nascita (DOB) e quindi utilizza JavaScript per calcolare e visualizzare:

La loro età oggi
La loro età in una data futura (o passata) specifica

Creazione del modulo

Iniziamo creando un nuovo modulo e aggiungendo i nostri campi. Assicurati di includere almeno un campo Data.

crea il tuo modulo e aggiungi tutti i tuoi campi, incluso almeno un campo date picker

Se hai bisogno di aiuto nella creazione del tuo modulo, consulta questa documentazione.

Aggiunta del campo HTML

Poiché il nostro obiettivo finale è presentare l'età una volta selezionato il compleanno, aggiungiamo un campo HTML. All'interno di questo campo, incorporeremo uno span HTML vuoto, a cui verrà assegnata la classe "age". Questo span vuoto servirà come segnaposto, che mostrerà dinamicamente l'età non appena il campo date picker catturerà la selezione dell'utente.
<span class="age"></span>

aggiungi un campo html e all'interno di quel campo aggiungi uno span html vuoto con la classe age

Aggiunta dello snippet

Aggiungi uno degli snippet seguenti al tuo sito.

Ogni snippet cerca un ID modulo e un ID campo data specifici (esempio: 3535_9). Aggiorna questi ID per corrispondere al tuo modulo e campo.

Opzione 1: Visualizza l'età di oggi

/**
 * 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 );

Opzione 2: Visualizza l'età in una data specifica scelta da te (età futura)

Usalo quando desideri l'età a partire da una data target fissa, ad esempio "9 maggio 2026". Questo è utile per scenari come ammissioni scolastiche o controlli di idoneità, dove è necessario sapere quanti anni avrà qualcuno in una data specifica.

Aggiorna il valore TARGET_DATE con la data che desideri.

/**
 * 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 "data target" può essere nel futuro o nel passato, e i calcoli funzionano comunque.
Se preferisci non codificare la data direttamente nel messaggio, puoi costruire il messaggio dalla variabile TARGET_DATE.

E questo è tutto ciò che ti serve per calcolare l'età da un campo date picker. Desideri anche cambiare la posizione del popup del date picker? Dai un'occhiata al tutorial su Come cambiare la posizione del popup del Date Picker.

Riferimento

Riferimento azione: wpforms_wp_footer

Come visualizzare l'età da un campo Date Picker

Riassunto AI