How to Display the Age From a Date Picker Field

Introdução

Gostaria de exibir a idade de alguém com base num campo de Seleção de Data no seu formulário? Este tutorial orienta-o na criação de um formulário que recolhe uma data de nascimento (DOB) e, em seguida, utiliza JavaScript para calcular e exibir:

A idade atual
A idade numa data futura (ou passada) específica

Criação do formulário

Vamos começar por criar um novo formulário e adicionar os nossos campos. Certifique-se de incluir pelo menos um campo Data.

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

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

Adicionar o campo HTML

Como o nosso objetivo final é apresentar a idade assim que o aniversário for selecionado, vamos adicionar um campo HTML. Dentro deste campo, vamos incorporar um span HTML vazio, que será atribuído a uma classe "age". Este span vazio servirá como um marcador de posição, que mostrará a idade dinamicamente assim que o seletor de data capturar a seleção do utilizador.
<span class="age"></span>

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

Adição do trecho de código

Adicione um dos trechos abaixo ao seu site.

Cada trecho procura um ID de Formulário e um 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 numa data específica à sua escolha (idade futura)

Use isto quando quiser a idade a partir de uma data alvo fixa, por exemplo "9 de maio de 2026". Isto é útil para cenários como admissões escolares ou verificações de elegibilidade, onde precisa de saber quão velho alguém será numa data específica.

Atualize o valor TARGET_DATE para qualquer data que precise.

/**
 * 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, pode construir a mensagem a partir da variável TARGET_DATE em vez disso.

E é tudo o que precisa para calcular a idade a partir de um campo de seleção de data. Gostaria também de alterar a posição do popup do seletor de data? Dê uma vista de olhos 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 a Partir de um Campo Date Picker

Resumo de IA