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

Introducción

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

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

Creación del formulario

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

Si necesita ayuda para crear su formulario, consulte esta documentación.

Añadir el campo HTML

Como nuestro objetivo final es presentar la edad una vez seleccionado el cumpleaños, vamos a añadir un HTML campo. Dentro de este campo, incrustaremos un span HTML vacío, al que asignaremos la clase "edad". 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ñade uno de los fragmentos siguientes a tu sitio web.

Cada fragmento busca un específico Formulario ID y ID del campo Fecha (ejemplo: 3535_9). Actualiza esos ID para que coincidan con tu formulario y campo.

Opción 1: Mostrar la edad a día 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 elijas (edad futura).

Utilícelo cuando desee conocer la edad en una fecha determinada, por ejemplo, «9 de mayo de 2026». Esto resulta útil en situaciones como admisiones escolares o comprobaciones de elegibilidad, en las que es necesario saber la edad que tendrá una persona en una fecha concreta.

Actualizar el TARGET_DATE valor a la fecha que necesites.

/**
 * 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 el cálculo sigue siendo válido.
• Si prefiere no codificar la fecha dentro del mensaje, puede crear el mensaje a partir de la TARGET_DATE variable en su lugar.

Y eso es todo lo que necesitas para calcular la edad a partir de un campo selector de fecha. ¿Quieres cambiar también la posición de la ventana emergente del selector de fecha? Echa un vistazo al tutorial sobre Cómo cambiar la posición de la ventana emergente del selector de fecha.

Referencia

Acción de referencia: wpforms_wp_footer