Cómo mostrar la edad a partir de un campo de selector de fecha

Introducción

¿Le gustaría mostrar la edad de alguien basándose en un campo de selector de fecha en su formulario? Este tutorial le guiará a través de la creación de un formulario que recopila una fecha de nacimiento (DOB) y luego utiliza JavaScript para calcular y mostrar:

• Su edad hoy
• Su edad en una fecha futura (o pasada) específica

Creación del formulario

Comencemos creando un nuevo formulario y añadiendo nuestros campos. Asegúrese de incluir al menos un campo de Fecha.

Si necesita ayuda para crear su formulario, por favor revise esta documentación.

Añadir el campo HTML

Como nuestro objetivo final es presentar la edad una vez seleccionada la fecha de nacimiento, añadamos un campo HTML. Dentro de este campo, incrustaremos un span HTML vacío, al que se le asignará la clase "age". Este span vacío servirá como marcador de posición, que mostrará la edad dinámicamente tan pronto como el campo selector de fecha capture la selección del usuario.
<span class="age"></span>

Añadir el fragmento

Añada uno de los fragmentos a continuación a su sitio.

Cada fragmento busca un ID de formulario y un ID de campo de fecha específicos (ejemplo: 3535_9). Actualice esos IDs para que coincidan con su formulario y campo.

Opción 1: Mostrar la edad a fecha de hoy

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

Opción 2: Mostrar la edad en una fecha específica que usted elija (edad futura)

Úselo cuando desee la edad a partir de una fecha objetivo fija, por ejemplo "9 de mayo de 2026". Esto es útil para escenarios como admisiones escolares o comprobaciones de elegibilidad, donde necesita saber qué edad tendrá alguien en una fecha específica.

Actualice el valor de TARGET_DATE a la fecha que necesite.

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

• La "fecha objetivo" puede ser en el futuro o en el pasado, y las matemáticas siguen funcionando.
• Si prefiere no codificar la fecha directamente en el mensaje, puede construir el mensaje a partir de la variable TARGET_DATE en su lugar.

Y eso es todo lo que necesita para calcular la edad a partir de un campo selector de fecha. ¿Le gustaría también cambiar la posición del popup del selector de fecha? Eche un vistazo al tutorial sobre Cómo cambiar la posición del popup del selector de fecha.

Referencia

Referencia de acción: wpforms_wp_footer