Come visualizzare l'età da un campo di selezione della data

Introduzione

Desideri visualizzare l'età di una persona in base al campo Selettore data nel tuo modulo? Questo tutorial ti guida nella creazione di un modulo che raccoglie la 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. Assicurarsi di includere almeno un campo Data.

Se avete bisogno di aiuto per creare il vostro modulo, consultate questa documentazione.

Aggiunta del campo HTML

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

Aggiunta dello snippet

Aggiungi uno dei frammenti di codice riportati di seguito al tuo sito.

Ogni snippet cerca uno specifico ID modulo e ID campo data (esempio: 3535_9). Aggiorna tali ID in modo che corrispondano al tuo modulo e al tuo campo.

Opzione 1: Visualizza l'età alla data odierna

/**
 * 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 dall'utente (età futura)

Utilizzalo quando desideri conoscere l'età a una data fissa, ad esempio "9 maggio 2026". È utile in scenari quali l'ammissione a scuola o la verifica dei requisiti di idoneità, in cui è necessario conoscere l'età che una persona avrà in una data specifica.

Aggiorna il TARGET_DATE valore alla data desiderata.

/**
 * 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 obiettivo" può essere futura o passata, e il calcolo rimane comunque valido.
• Se preferisci non inserire la data in modo fisso all'interno del messaggio, puoi creare il messaggio dal TARGET_DATE variabile invece.

Questo è tutto ciò che serve per calcolare l'età da un campo di selezione della data. Volete anche cambiare la posizione del popup del selezionatore di date? Date un'occhiata al tutorial su Come cambiare la posizione del popup del selezionatore di date.

Riferimento

Riferimento azione: wpforms_wp_footer