Wie man das Alter aus einem Datumsauswahlfeld anzeigt

Einführung

Möchten Sie das Alter einer Person anhand eines Datumsauswahlfelds in Ihrem Formular anzeigen? In diesem Tutorial erfahren Sie, wie Sie ein Formular erstellen, das das Geburtsdatum erfasst und anschließend mithilfe von JavaScript berechnet und anzeigt:

• Ihr Alter heute
• Ihr Alter zu einem bestimmten Zeitpunkt in der Zukunft (oder Vergangenheit)

Erstellen des Formulars

Beginnen wir damit, ein neues Formular zu erstellen und unsere Felder hinzuzufügen. Achten Sie darauf, dass Sie mindestens ein Datumsfeld einfügen.

Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie bitte diese Dokumentation.

Hinzufügen des HTML-Feldes

Da unser Ziel letztlich darin besteht, das Alter zu präsentieren, sobald der Geburtstag ausgewählt ist, fügen wir eine HTML Feld. In dieses Feld wird eine leere HTML-Spanne eingebettet, der die Klasse "Alter" zugewiesen wird. Dieser leere Bereich dient als Platzhalter, der das Alter dynamisch anzeigt, sobald das Datumsauswahlfeld die Auswahl des Benutzers erfasst.
<span class="age"></span>

Hinzufügen des Snippets

Fügen Sie einen der folgenden Snippets zu Ihrer Website hinzu.

Jeder Snippet sucht nach einem bestimmten Formular-ID und Datumsfeld-ID (Beispiel: 3535_9). Aktualisieren Sie diese IDs entsprechend Ihrem Formular und Feld.

Option 1: Alter zum heutigen Tag anzeigen

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

Option 2: Zeige das Alter zu einem bestimmten Datum deiner Wahl an (zukünftiges Alter).

Verwenden Sie diese Option, wenn Sie das Alter zu einem festen Stichtag, beispielsweise dem „9. Mai 2026“, ermitteln möchten. Dies ist nützlich für Szenarien wie Schulzulassungen oder Berechtigungsprüfungen, bei denen Sie wissen müssen, wie alt eine Person zu einem bestimmten Datum sein wird.

Aktualisieren Sie die TARGET_DATE Wert auf das von Ihnen gewünschte Datum.

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

• Das „Zieldatum“ kann in der Zukunft oder in der Vergangenheit liegen, und die Berechnung funktioniert trotzdem.
• Wenn Sie das Datum nicht fest in die Nachricht einfügen möchten, können Sie die Nachricht aus der TARGET_DATE stattdessen Variable.

Und das ist alles, was Sie brauchen, um das Alter aus einem Datumsauswahlfeld zu berechnen. Möchten Sie auch die Position des Popups der Datumsauswahl ändern? Schauen Sie sich das Tutorial How To Change the Position of the Date Picker Popup an.

Referenz

Referenz der Aktion: wpforms_wp_footer