Bakehouse Datepicker

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

    ViewHelper-Bibliothek

    Verwendung

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

    Datepicker

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

    Time- und Datetimepicker

    Mit dem controls-Attribute kann angeben werden, welche Auswahl-Oberflächen angezeigt werden sollen. Es können auch mehrere Auswahl 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
    HTML
    <bh:form.datepicker controls="calendar,time" />

    Daterange

    Mit dem bh:form.datepicker.range-ViewHelper bzw. den bh:form.datepicker.range.start und bh:form.datepicker.range.end-ViewHelpern kann eine Zeitraumauwahl 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)

    Uhrzeitsformate

    h12-Stunden-Format (ohne Füllnull)
    hh
    12-Stunden-Format (Füllnull)
    H
    24-Stunden-Format (ohne Füllnull)
    HH24-Stunden-Format (Füllnull)
    m
    Minuten (ohne Füllnull)
    mm
    Minuten (Füllnull)
    s
    Sekunden (ohne Füllnull)
    ss
    Sekunden (Füllnull)
    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 Feld mit der jeweiligen ID übernommen und aktualisiert. Die angegeben 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 Setzten 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 ... });