So zeigen Sie das Alter aus einem Datumsfeld an

Einleitung

Möchten Sie das Alter einer Person basierend auf einem Datumsfeldauswahl-Feld in Ihrem Formular anzeigen? Dieses Tutorial führt Sie durch die Erstellung eines Formulars, das ein Geburtsdatum (DOB) erfasst und dann JavaScript verwendet, um Folgendes zu berechnen und anzuzeigen:

• Ihr Alter heute
• Ihr Alter an einem bestimmten zukünftigen (oder vergangenen) Datum

Erstellung des Formulars

Beginnen wir mit der Erstellung eines neuen Formulars und dem Hinzufügen unserer Felder. Stellen Sie sicher, 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-Felds

Da unser oberstes Ziel ist, das Alter anzuzeigen, sobald das Geburtsdatum ausgewählt wurde, fügen wir ein HTML-Feld hinzu. Innerhalb dieses Felds betten wir einen leeren HTML-Span ein, dem wir die Klasse „age“ zuweisen. Dieser leere Span dient als Platzhalter, der das Alter dynamisch anzeigt, sobald das Datumsfeldauswahl-Feld die Auswahl des Benutzers erfasst hat.
<span class="age"></span>

Hinzufügen des Snippets

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

Jeder Snippet sucht nach einer bestimmten Formular-ID und Datumsfeld-ID (Beispiel: 3535_9). Aktualisieren Sie diese IDs, damit sie zu Ihrem Formular und Feld passen.

Option 1: Alter von heute 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: Alter an einem bestimmten von Ihnen gewählten Datum anzeigen (zukünftiges Alter)

Verwenden Sie dies, wenn Sie das Alter zu einem festgelegten Zieldatum wissen möchten, z. B. „9. Mai 2026“. Dies ist nützlich für Szenarien wie Zulassungen zu Schulen oder Eignungsprüfungen, bei denen Sie wissen müssen, wie alt jemand an einem bestimmten Datum sein wird.

Aktualisieren Sie den Wert TARGET_DATE auf das 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 Vergangenheit liegen, die Berechnung funktioniert trotzdem.
• Wenn Sie das Datum nicht fest im Text kodieren möchten, können Sie den Text stattdessen aus der Variablen TARGET_DATE erstellen.

Und das ist alles, was Sie brauchen, um das Alter aus einem Datumsfeldauswahl-Feld zu berechnen. Möchten Sie auch die Position des Datumsfeldauswahl-Popups ändern? Schauen Sie sich das Tutorial So ändern Sie die Position des Datumsfeldauswahl-Popups an.

Referenz

Aktionsreferenz: wpforms_wp_footer