How to Display the Age From a Date Picker Field

Introdução

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 uma data de nascimento (DOB) e, em seguida, usa JavaScript para calcular e exibir:

A idade hoje
A idade 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 Data.

crie seu formulário e adicione todos os seus campos, incluindo pelo menos um campo seletor de data

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

Adicionando o campo HTML

Como nosso objetivo final é apresentar a idade assim que o aniversário for selecionado, vamos adicionar um campo HTML. Dentro deste campo, incorporaremos um span HTML vazio, que receberá uma classe "age". Este span vazio servirá como um espaço reservado, que exibirá a idade dinamicamente assim que o campo seletor de data capturar a seleção do usuário.
<span class="age"></span>

adicione um campo html e dentro desse campo adicione um span HTML vazio com a classe age

Adicionando o snippet

Adicione um dos trechos abaixo ao seu site.

Cada trecho procura por um ID de formulário e ID de campo de data específicos (exemplo: 3535_9). Atualize esses IDs para corresponder ao seu formulário e campo.

Opção 1: Exibir idade a partir de 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 idade em uma data específica à sua escolha (idade futura)

Use isso quando quiser a idade a partir de uma data alvo fixa, por exemplo, "9 de maio de 2026". Isso é útil para cenários como admissões escolares ou verificações de elegibilidade, onde você precisa saber a idade de alguém em uma data específica.

Atualize o valor TARGET_DATE 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 ainda funciona.
Se preferir não codificar a data diretamente na mensagem, você pode construir a mensagem a partir da variável TARGET_DATE.

E é tudo que você precisa para calcular a idade a partir de um campo seletor de data. Gostaria também de alterar a posição do popup do seletor de data? Dê uma olhada no tutorial sobre Como Alterar a Posição do Popup do Seletor de Data.

Referência

Referência de Ação: wpforms_wp_footer

Como Exibir a Idade de um Campo Date Picker

Resumo de IA