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

Introdução

Você gostaria de exibir a idade de alguém com base em um campo Seletor de Data em seu formulário? Este tutorial mostra como criar um formulário que coleta a data de nascimento (DOB) e, em seguida, usa JavaScript para calcular e exibir:

A idade deles hoje
A idade deles em uma data futura (ou passada) específica

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.

crie seu formulário e adicione todos os campos, incluindo pelo menos um campo de seleção de data

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>

adicionar um campo html e, dentro desse campo, adicionar um span HTML vazio com uma classe de idade

Adicionando o snippet

Adicione um dos trechos abaixo ao seu site.

Cada trecho procura um elemento específico ID do formulário e ID do campo Data (exemplo: 3535_9). Atualize esses IDs para corresponder ao seu formulário e campo.

Opção 1: Exibir a idade até hoje

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

Opção 2: Exibir a idade em uma data específica escolhida por você (idade futura)

Use isso quando quiser saber a idade em uma data fixa, por exemplo, “9 de maio de 2026”. Isso é útil para situações como admissões escolares ou verificações de elegibilidade, em que você precisa saber a idade de alguém em uma data específica.

Atualize o TARGET_DATE valor para qualquer data que você precisar.

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

A “data-alvo” pode ser no futuro ou no passado, e a matemática continua a funcionar.
Se preferir não codificar a data dentro da mensagem, você pode criar a mensagem a partir do TARGET_DATE variável em vez disso.

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