Introdução
Gostaria de apresentar a idade de um campo de seleção de data no seu formulário? Neste guia conciso, vamos orientá-lo na criação de um formulário que recolhe a data de nascimento através de um campo de seleção de data. Além disso, demonstraremos como utilizar o JavaScript para calcular e apresentar sem esforço a idade da pessoa noutra secção do formulário. Vamos prosseguir com as instruções passo a passo!
Criar o formulário
Vamos começar por criar um novo formulário e adicionar os nossos campos. Certifique-se de que inclui pelo menos um campo Data.
Se precisar de ajuda para criar o seu formulário, consulte esta documentação.
Adicionar o campo HTML
Como o nosso objetivo final é apresentar a idade quando a data de nascimento é selecionada, vamos adicionar um HTML campo. Neste campo, vamos incorporar um intervalo HTML vazio, ao qual será atribuída uma classe de "idade". Este espaço vazio servirá de espaço reservado, que mostrará a idade dinamicamente assim que o campo de seleção de data captar a seleção do utilizador.
<span class="age"></span>
Adicionar 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 );
Este snippet tem muitos comentários que explicam cada passo. Mas procurará o ID do formulário 3535 e o ID do campo Data 9 e, quando essa data for selecionada e o popup do seletor de datas fechar, fará automaticamente o cálculo a partir da data introduzida, menos a data atual, e formulará esta diferença em anos para apresentar no nosso span HTML vazio com uma classe de idade.
Para efeitos desta documentação, o nosso ID de formulário é 3535 e o ID de campo para o campo Data é 9. Terá de atualizar estes IDs no snippet para corresponderem aos seus próprios IDs de formulário e de campo. Se precisar de ajuda para encontrar os seus IDs, consulte esta documentação.
E isto é tudo o que precisa para calcular a idade a partir de um campo de seleção de data. Gostaria de alterar também a posição do popup do seletor de datas? Dê uma olhada no tutorial Como alterar a posição do popup de seleção de data.
Referência
Referência da ação: wpforms_wp_footer