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

Introduzione

Volete visualizzare l'età da un campo di selezione della data nel vostro modulo? In questa guida concisa, vi guideremo nella creazione di un modulo che raccoglie la data di nascita attraverso un campo date picker. Inoltre, dimostreremo come sfruttare JavaScript per calcolare e mostrare senza sforzo l'età della persona in un'altra sezione del modulo. Procediamo con le istruzioni passo-passo!

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

Ora è il momento di aggiungere lo snippet che riunirà tutto questo. Se avete bisogno di aiuto su come e dove aggiungere gli snippet al vostro sito, consultate questa utile guida.

/**
 * 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 the today date as the current date
 				var today = new Date();
				// Set the DOB as the selected date of birth from
				// the date picker field
				var DOB = selectedDates[0];
				// Get the age by subtracting today's date from
				// the selected date of birth
				var age = today.getTime() - DOB.getTime();
				// Add a string to the message that will appear
				// showing the age
				var message = 'Your age is ';
				// Calculate the date from the age into "years old" 
                age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
				// Assign the message and age into a variable
				var totalMessage = message.concat(age);
				// Display the message into the empty span of "age"
				// inside the HTML field
                jQuery('.age').text(totalMessage);
 
            }
 
        }
         
    });
</script>
 
<?php
}
 
add_action( 'wpforms_wp_footer', 'wpf_dev_check_age', 10 );

Questo snippet contiene molti commenti che spiegano ogni passaggio. Ma cercherà l'ID del modulo 3535 e l'ID del campo Data di 9 e quando la data viene selezionata e il popup di selezione della data si chiude, effettuerà automaticamente il calcolo dalla data inserita, meno la data corrente e formulerà questa differenza in anni da visualizzare nel nostro span HTML vuoto con una classe di età.

Ai fini di questa documentazione, il nostro ID modulo è 3535 e l'ID campo per il campo Data è 9. È necessario aggiornare questi ID nello snippet per farli corrispondere ai propri ID modulo e campo. Se avete bisogno di aiuto per trovare i vostri ID, consultate questa documentazione.

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