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