Simple Date Picker for the From-To Filter Rule via Flatpickr Integration

If you want a date picker in the FE widget of the From-To filter rule (“value from/to for a date field”), this can be achieved with the following adjustments:

In the backend, create the template mm_filteritem_default.html5, rename it to mm_filteritem_flatpickr.html5, and select it in the filter settings.

The following lines need to be added to the template:

At the top, include the Flatpickr files — these can be found at Flatpickr:

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

At the end, add the following JavaScript code — here the column name of the attribute is startDate and the RangePlugin is used. Further settings can be found in the Flatpickr documentation:

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