Einfache Datumsauswahl für den Filterregel from-to durch Integration von Flatpickr

Wenn man im FE-Widget der Filterregel From-To („Wert von/bis für ein Datumsfeld“) Picker für die Datumsauswahl haben möchte, kann man das mit den folgenden Anpassungen erreichen:

Im BE das Template mm_filteritem_default.html5 anlegen und in mm_filteritem_flatpickr.html5 umbenennen sowie in den Filtereinstellungen als Template auswählen.

Folgende Zeilen sind im Template zu ergänzen:

An 1. Stelle die Dateien von Flatpickr einbinden - diese sind unter Flatpickr zu finden:

1<?php
2$GLOBALS['TL_JAVASCRIPT'][] = 'files/resources/flatpickr/flatpickr.min.js';
3$GLOBALS['TL_JAVASCRIPT'][] = 'files/resources/flatpickr/l10n/de.js';
4$GLOBALS['TL_JAVASCRIPT'][] = 'files/resources/flatpickr/plugins/rangePlugin.js';
5$GLOBALS['TL_CSS'][]        = 'files/resources/flatpickr/flatpickr.min.css';
6?>

An letzter Stelle den folgenden JavaScript-Code eingeben - hier ist der Spaltenname des Attributes startDate und es wird das RangePlugin verwendet - weitere Einstellungen in der Doku vom Flatpickr zu finden:

 1<script>
 2flatpickr('#ctrl_startDate_0', {
 3   locale: "de",
 4   minDate: "today",
 5   enableTime: false,
 6   allowInput: true,
 7   disableMobile: true,
 8   dateFormat: "d.m.Y",
 9   defaultDate: ["today", new Date().fp_incr(14)],
10   "plugins": [new rangePlugin({ input: "#ctrl_startDate_1"})]
11});
12</script>