<html lang="de-de" dir="ltr"><head></head><body>### [Bedingte Logik mit einem Datumsauswahlfeld verwenden](https://wpforms.com/developers/how-to-use-conditional-logic-with-a-date-picker/)

**Veröffentlicht:** 21. März 2023
**Autor:** Umair Majeed

**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie die bedingte Logik mit Ihrem Datumsauswahlfeld verwenden, indem Sie JavaScript verwenden, um Formularfelder basierend auf dem Datum im Datumsauswahlfeld ein- und auszublenden. 

**Inhalt:**

Möchten Sie Formularfelder basierend auf dem Alter eines Benutzers ein- oder ausblenden? Durch die Kombination des Datumsauswahlfelds von WPForms mit benutzerdefinierter bedingter Logik können Sie dynamische Formulare erstellen, die sich an Benutzereingaben anpassen.

Diese Anleitung zeigt Ihnen, wie Sie ein Dropdown-Feld nur dann anzeigen, wenn der Benutzer angibt, dass er 21 Jahre oder älter ist – perfekt für altersbeschränkte Inhalte, Veranstaltungsanmeldungen oder ähnliche Szenarien.

## Einrichten Ihres Formulars

Erstellen Sie zuerst ein Formular mit diesen Feldern:

- Namensfeld
- E-Mail-Feld
- Datumsfeld (für Geburtsdatum)
- Dropdown-Feld (dies wird zunächst ausgeblendet)

Wenn Sie Hilfe beim Erstellen Ihres Formulars benötigen, lesen Sie bitte unsere Anleitung zum [Erstellen Ihres ersten Formulars](https://wpforms.com/docs/creating-first-form/).

## Hinzufügen der CSS-Klasse

Da wir möchten, dass das **Dropdown**-Feld beim ersten Laden des Formulars ausgeblendet wird, müssen wir ihm einen CSS-Klassennamen hinzufügen.

Wählen Sie dazu das **Dropdown**-Feld in Ihrem Formular-Editor aus und klicken Sie auf **Erweitert**. Scrollen Sie dann nach unten zu **CSS-Klassen** und geben Sie `age-restriction` ein. Stellen Sie sicher, dass Sie auf **Speichern** im Formular klicken, um Ihre Änderungen zu übernehmen.

![Fügen Sie den Namen age-restriction zu den CSS-Klassen im Dropdown-Feld hinzu](https://wpforms.com/wp-content/uploads/2023/03/wpforms-add-css-class-cond_date.jpg)## Bedingte Logik für ein Datumsfeld verwenden

Jetzt ist es an der Zeit, den Code-Schnipsel auf Ihrer Website hinzuzufügen. Dieser Code blendet zunächst das **Dropdown**-Feld aus, wenn das Formular geladen wird. Dann, wann immer sich das Feld **Geburtsdatum** ändert, berechnet er, ob der Benutzer 21 Jahre oder älter ist, und blendet das Dropdown-Feld entsprechend ein oder aus.

Denken Sie daran, diese Werte im Code zu aktualisieren:

- Die Formular-ID (2575 im Beispiel) sollte durch Ihre eigene Formular-ID ersetzt werden
- Die ID des Datumsauswahlfelds (22 im Beispiel) sollte durch Ihre Feld-ID ersetzt werden

Und das ist alles, was Sie brauchen, um die bedingte Logik mit einem Datumsauswahlfeld zu verwenden. Möchten Sie als Nächstes die Position des Datumsauswahl-Popups ändern? Sehen Sie sich unser Tutorial an [So ändern Sie die Position des Datumsauswahl-Popups](https://wpforms.com/developers/how-to-change-the-position-of-the-date-picker-popup/ "So ändern Sie die Position des Datumsauswahl-Popups").

## Referenzaktion

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Verwendung der Aktion wpforms_wp_footer_end")

**Kategorien:** Erweitern

**Schlagwörter:** Datums-/Zeitfeld, Javascript, JS

---</body></html>