Anpassungen für Tempus Dominus

Mit Ilch 2.2.0 wurde neben den größeren Änderungen, wie der Wechsel auf Bootstrap 5 und CKEditor 5 auch bootstrap-datetimepicker durch Tempus Dominus ersetzt. Dies war nötig, da bootstrap-datetimepicker schon länger nicht mehr weiterentwickelt wurde und nicht mit Bootstrap 5 kompatibel ist.

Tempus Dominus is the successor to the very popular "eonasdan/bootstrap-datetimepicker". The plugin provides a wide array of options that allow developers to provide date and or time selections to users as simple pickers, date of birth selection, appointments and more. Quelle: https://getdatepicker.com/6/

Hier werden nun die nötigen Änderungen anhand eines Beispiels erläutert.

Es müssen nun die Dateien von Tempus Dominus, anstatt bootstrap-datetimepicker eingebunden werden.

Einbindung der Stylesheet-Datei von Tempus Dominus:

<link href="<?=$this->getStaticUrl('js/tempus-dominus/dist/css/tempus-dominus.min.css') ?>" rel="stylesheet">

Einbindung der Abhängigkeit "Popper" von Tempus Dominus, Tempus-Dominus selber und der Sprachdatei je nach "Locale".

<script src="<?=$this->getStaticUrl('js/popper/dist/umd/popper.min.js') ?>" charset="UTF-8"></script>
<script src="<?=$this->getStaticUrl('js/tempus-dominus/dist/js/tempus-dominus.min.js') ?>" charset="UTF-8"></script>
<?php if (strncmp($this->getTranslator()->getLocale(), 'en', 2) !== 0) : ?>
    <script src="<?=$this->getStaticUrl('js/tempus-dominus/dist/locales/' . substr($this->getTranslator()->getLocale(), 0, 2) . '.js') ?>" charset="UTF-8"></script>
<?php endif; ?>

Laden der Lokalisierung. Dies ist nötig, damit Tempus Dominus vollständig lokalisiert dargestellt wird. Der anschließend folgende Code ist je nachdem wie die Datumsauswahl dargestellt werden soll unterschiedlich. Es sollte problemlos möglich sein, die Funktion des vorher eingebundenen Dialogs von bootstrap-datetimepicker mit Tempus Dominus zu realisieren. Werfen sie hierzu einen Blick in die offizielle Dokumentation: https://getdatepicker.com/6/

Es wird ebenfalls ein Werkzeug zur Migration der alten Konfiguration zur neuen Konfiguration von Tempus Dominus zur Verfügung gestellt: https://getdatepicker.com/6/migration.html

In diesem Beispiel wird die Auswahl für Datum und Uhrzeit nebeneinander dargestellt ("sideBySide"). Zudem werden Kalenderwochen angezeigt ("calendarWeeks"). Die Schaltflächen für die schnelle Auswahl des heutigen Datums und zum Schließen des Dialogs wurden eingebunden. Außerdem wurde z.B. noch das Format für Datum und Uhrzeit festgelegt, sowie der Wochentag, welcher die Woche startet auf Montag gesetzt ("startOfTheWeek"). In unseren Beispiel haben wir zwei Auswahl-Dialoge eingebunden ("start" und "end"). Die Elemente für die beiden Auswahl-Dialoge sollten eine ID haben ("startDate", "endDate").

<div class="row mb-3">
    <label for="startDate" class="col-xl-2 control-label">
        <?=$this->getTrans('startDate') ?>:
    </label>
    <div id="startDate" class="col-xl-4 input-group ilch-date date form_datetime">
        <input type="text"
               class="form-control"
               id="startDate"
               name="startDate"
               value="<?=date('d.m.Y 00:00', strtotime( '-7 days' )) ?>"
               readonly>
        <span class="input-group-text">
            <span class="fa-solid fa-calendar"></span>
        </span>
    </div>
</div>
...

<script>
$(document).ready(function() {
    if ("<?=substr($this->getTranslator()->getLocale(), 0, 2) ?>" !== 'en') {
        tempusDominus.loadLocale(tempusDominus.locales.<?=substr($this->getTranslator()->getLocale(), 0, 2) ?>);
        tempusDominus.locale(tempusDominus.locales.<?=substr($this->getTranslator()->getLocale(), 0, 2) ?>.name);
    }

    const start = new tempusDominus.TempusDominus(document.getElementById('startDate'), {
        display: {
            sideBySide: true,
            calendarWeeks: true,
            buttons: {
                today: true,
                close: true
            }
        },
        localization: {
            locale: "<?=substr($this->getTranslator()->getLocale(), 0, 2) ?>",
            startOfTheWeek: 1,
            format: "dd.MM.yyyy HH:mm"
        },
        promptTimeOnDateChange: true,
        stepping: 15
    });

    const end = new tempusDominus.TempusDominus(document.getElementById('endDate'), {
        display: {
            sideBySide: true,
            calendarWeeks: true,
            buttons: {
                today: true,
                close: true
            }
        },
        localization: {
            locale: "<?=substr($this->getTranslator()->getLocale(), 0, 2) ?>",
            startOfTheWeek: 1,
            format: "dd.MM.yyyy HH:mm"
        },
        stepping: 15
    });

    start.subscribe('change.td', (e) => {
        end.updateOptions({
            restrictions: {
                minDate: e.date,
            },
        });
    });

    end.subscribe('change.td', (e) => {
        start.updateOptions({
            restrictions: {
                maxDate: e.date,
            },
        });
    });
});
</script>