Como exibir a idade em um campo de seleção de data

Introdução

Gostaria de exibir a idade de um campo de seleção de data em seu formulário? Neste guia conciso, vamos orientá-lo na criação de um formulário que coleta a data de nascimento por meio de um campo de seleção de data. Além disso, demonstraremos como aproveitar o JavaScript para calcular e exibir sem esforço a idade da pessoa em outra seção do formulário. Vamos prosseguir com as instruções passo a passo!

Criando o formulário

Vamos começar criando um novo formulário e adicionando nossos campos. Certifique-se de incluir pelo menos um campo Date.

Se precisar de ajuda para criar seu formulário, consulte esta documentação.

Adição do campo HTML

Como nosso objetivo final é apresentar a idade assim que a data de nascimento for selecionada, vamos adicionar um HTML field. Nesse campo, incorporaremos uma extensão HTML vazia, à qual será atribuída uma classe de "idade". Esse espaço vazio servirá como um espaço reservado, que exibirá a idade dinamicamente assim que o campo de seleção de data capturar a seleção do usuário.
<span class="age"></span>

Adicionando o snippet

Agora é hora de adicionar o snippet que reunirá tudo isso. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, consulte este guia útil.

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

Esse snippet tem muitos comentários que explicam cada etapa. Mas ele procurará o ID do formulário 3535 e o ID do campo Data de 9 e, quando essa data for selecionada e o pop-up do seletor de data fechar, ele fará automaticamente o cálculo da data inserida menos a data atual e formulará essa diferença em anos para exibir em nosso intervalo HTML vazio com uma classe de idade.

Para fins desta documentação, nosso ID de formulário é 3535 e o ID de campo para o campo Date é 9. Você precisará atualizar esses IDs no snippet para que correspondam aos seus próprios IDs de formulário e campo. Se precisar de ajuda para encontrar seus IDs, consulte esta documentação.

E isso é tudo o que você precisa para calcular a idade de um campo de seleção de data. Você também gostaria de alterar a posição do pop-up do seletor de data? Dê uma olhada no tutorial How To Change the Position of the Date Picker Popup (Como alterar a posição do popup de seleção de data).

Referência

Referência da ação: wpforms_wp_footer