Support
HelpHelp Center
  1. Dokumentation
  2. Implementierung
  3. Templating
  4. Bakehouse Datepicker

    Bakehouse Datepicker

    Mit dem bh:form.datepicker-ViewHelper und dessen Erweiterungen können im Bakehouse schnell und einfach Datum- und Zeitauswahlen integriert werden.

    ViewHelper-Bibliothek

    Verwendung

    Der bh:form.datepicker-ViewHelper generiert, wenn keine Attribute angegeben werden, eine Datumsauswahl ohne Eingrenzungen.

    Achtung

    required-HTML-Validierung funktioniert nicht!

    Da der Datepicker ein "readonly"-Input-Feld generiert, greift das "required"-Attribut nicht. Aus diesem Grund muss im TypoScript eine Backend-Validierung konfiguriert werden. Beispiel:

    Typoscript
    plugin.tx_bh.settings.contentElements.bhAnfrage.forms { inquire.properties { anreise.validators { notempty.name = NotEmpty notempty.errorMessage = TEXT notempty.errorMessage.value = Anreise darf nicht leer sein } abreise.validators { notempty.name = NotEmpty notempty.errorMessage = TEXT notempty.errorMessage.value = Abreise darf nicht leer sein } } }

    Datepicker

    HTML
    <bh:form.datepicker class="meinDatepickerInput" placeholder="Datum auswählen" />

    Time- und Datetimepicker

    Mit dem controls-Attribut kann angeben werden, welche Auswahl-Oberflächen angezeigt werden sollen. Es können auch mehrere Auswahlen kommagetrennt mitgegeben werden, um verschiedene Datetimepicker zu erstellen. Folgende Oberfächen stehen zur Verfügung:

    • date - Datumsauswahl 
    • calendar - Datumsauswahl mit Kalender
    • time -  Uhrzeitauswahl
    • datetime - Datums- und Uhrzeitauswahl

    Mit den stepMinute- und stepHour-Attributen können auch die Zeit-Schritte definiert werden.

    HTML
    <bh:form.datepicker controls="calendar,time" stepMinute="15" stepHour="2" />

    Daterange

    Mit dem bh:form.datepicker.range-ViewHelper bzw. den bh:form.datepicker.range.start und bh:form.datepicker.range.end-ViewHelpern, kann eine Zeitraumauswahl erstellt werden. Bei geteilten Inputs müssen alle Datepicker-Konfigurationen beim start angegeben werden.

    HTML
    <!-- Ein Input-Feld --> <bh:form.datepicker.range />
    HTML
    <!-- Zwei Input-Felder --> <bh:form.datepicker.range.start key="test"/> <bh:form.datepicker.range.end key="test" />

    Format definieren

    Mit dem Attributen dateFormat und timeFormat kann das Format des Datum bzw. der Uhrzeit mitgegeben werden.

    HTML
    <bh:form.datepicker dateFormat="YYYY-MM-DD" />

    Datumsformate

    MMonat im Jahr (ohne Füllnull)
    MM
    		Monat im Jahr (zweistellig)
    MMM
    		Monatskürzel
    MMMMMonatsbezeichnung
    DTag im Monat (ohne Füllnull)
    DDTag im Monat (zweistellig)
    DDDWochentagskürzel
    DDDDWochentagsbezeichnung
    YYJahr (zweistellig)
    YYYYJahr (vierstellig)

    Uhrzeitformate

    h12-Stunden-Format (ohne Füllnull)
    hh
    		12-Stunden-Format (zweistellig)
    H
    		24-Stunden-Format (ohne Füllnull)
    HH24-Stunden-Format (zweistellig)
    m
    		Minuten (ohne Füllnull)
    mm
    		Minuten (zweistellig)
    s
    		Sekunden (ohne Füllnull)
    ss
    		Sekunden (zweistellig)
    a
    		am/pm in Kleinbuchstaben
    A
    		AM/PM in Großbuchstaben

    Datumsbereich eingrenzen

    Mit min und max kann der auswählbare Datumsbereich eingegrenzt werden. Wird ein fixes Datum angegeben, muss dieses im YYYY-MM-DD-Format sein.

    HTML
    <bh:form.datepicker min="2030-01-05" max="2030-01-17" />

    Abhängig von einem Datepicker

    Bei der Angabe einer ID wird automatisch der Wert des Feldes mit der jeweiligen ID übernommen und aktualisiert. Die angegebene ID muss auf einem bh:form.datepicker  liegen.

    HTML
    <bh:form.datepicker max="#max" id="min" /> <bh:form.datepicker min="#min" id="max" />

    Abhängig vom heutigen Datum

    Bei einer Ganzzahl, wird dieser Wert an Tagen beim aktuellen Datum hinzugefügt bzw. abgezogen (..., -1: Gestern, 0: Heute, 1: Morgen, ...).

    HTML
    <bh:form.datepicker min="1" /> <!-- Frühestes auswählbares Datum ist morgen -->

    Anpassungen

    Achtung

    Kein Style auf Datepicker-Klassen

    Um die Wartbarkeit, Erweiterbarkeit und Ersetzbarkeit des Datepickers sicherzustellen, darf nicht auf die Klassen des Datepickers designt werden. Auf das Input-Feld können jedoch frei Klassen hinzugefügt werden.

    Farben

    Die Optik des Datepickers kann geringfügig mit den CSS-Variablen --datepicker-color-highlight und --datepicker-color-selected angepasst werden.

    CSS
    :root { --datepicker-color-highlight: rgba(254, 138, 23, 1); --datepicker-color-selected: rgba(254, 138, 23, 0.25); }

    JavaScript

    Das Setzen und Abfragen des aktuellen Wertes kann über den value des Inputs durchgeführt werden.

    Achtung

    JS-Selektor nicht auf generierte IDs

    Um die Inputs im JavaScript zu verwenden, müssen eigene IDs oder Klassen hinzugefügt und verwendet werden. Generierte IDs und Klassen können sich bei Updates ändern und somit den Selektor außer Kraft setzen.

    Javascript
    // setzen eines Datums per jQuery $('#myField').val('01.01.2025'); // auslesen eines Datums var date = $('#myField').val(); // auf Änderungen reagieren $('#myField').on('change', function(){ // dein Code ... });

    Verwandte Inhalte