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

Introdução

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

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

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.

crie o seu formulário e adicione todos os seus campos, incluindo pelo menos um campo de seleção de 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 um campo html e, dentro desse campo, adicionar um span HTML vazio com uma classe de idade

Adicionar o snippet

Adicione um dos trechos abaixo ao seu site.

Cada trecho procura um 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: Mostrar 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 numa data específica à sua escolha (idade futura)

Use isso quando quiser saber a idade em 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, em que você precisa saber a idade de alguém em uma data específica.

Atualize o TARGET_DATE valor para qualquer data que 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, pode criar a mensagem a partir do TARGET_DATE variável em vez disso.

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