Erstellung eines Date Pickers mit Dropdowns

Einen Date Picker mit 3 Dropdown kann man wie folgt erstellen.

Zuerst nimmt man eine Section und setzt die CSS-Klassen „lan-form-styles__size-full“ und „lan-form-styles__datedefault“ darauf.

In die Section packt man dann ein Text-Element und 3 Dropdown lists.

Screenshot Backend Date Picker Dropdowns:

Beim Text-Element stellt man das „Html tag“ auf „label“ und setzt die CSS-Klasse „lan-form-styles__datedefault-label“.

Screenshot Backend Label:

Bei dem Dropdown für den Tag verwendet man die CSS-Klasse „lan-form-styles__datedefault-day“.

Screenshot Backend Dropdown Day:

Bei dem Dropdown für den Monat verwendet man die CSS-Klasse „lan-form-styles__datedefault-month“.

Bei dem Dropdown für das Jahr verwendet man die CSS-Klasse „lan-form-styles__datedefault-year“.

Screenshot Frontend Date Picker:

Es gibt noch eine 2. Variante, bei der man die Dropdowns zuerst in je ein Section hinzufügt und dann die 3 Sections in ein „Oben“-Section einfügt.

Screenshot Backend Date Picker Dropdowns Variant 2:

Die CSS-Klasse „lan-form-styles__datedefault-day“, „lan-form-styles__datedefault-month“ und „lan-form-styles__datedefault-year“ warden hier nicht auf die Dropdown lists, sondern auf die umgebenen Sections gesetzt, wodurch ein Bindestrich zwischen den Dropdowns ausgegeben wird.

Screenshot Frontend Date Picker Dropdowns Variant 2:

Für einen Date Picker mit einem einzelnen Date-Element braucht man keine zusätzlichen CSS-Klassen setzen.

Screenshot Backend Date Element:

Screenshot Frontend Date Element: