[contao-catalog-manager-bundle] Eine Liste nach Datum filtern

Da es in Version 3 des Catalog Managers keinen Filtergenerator mehr gibt, muss ich die Funktionalität zur Ausgabe einer Listenansicht, in dem konkreten Falle der tl_calendar_events, mit dem Formulargenerator nachstellen.

Dabei stolpere ich an mehreren Stellen:

1. Der Datepicker im Formular zeigt immer nur "tt.mm.yyyy", obwohl im Quellcode als Standard und als Platzhalter das aktuelle Datum steht.
Wenn ich das Eingabefeld als Textfeld lasse, dann wird der Platzhalter korrekt ausgegeben.

2. Die Datenübergabe erfolgt per GET-Parameter und dabei steht in der URL veranstaltungskalender.html?datum_von=2025-06-01

3. Im Frontendmodul "Listenansicht" des Catalog Managers gebe ich als Filterfunktion ein:

Code:

---

Startdatum greaterEqual {{ACTIVE::datum_von::?default={{TIMESTAMP}}}}

---

ein, das hat in Version 1 gut funktioniert.

Beim Aufruf des Kalenders werden immerhin nur alle zukünftigen Events ausgegeben, aber sobald ich nach einem Startdatum filtern will, werden als Ergebnis alle Events ausgegeben.
Ich vermute, das es irgendwo an der Datumsformatierung hängt, tappe aber völlig im Dunkeln und weiß nicht, wie das richtig umzusetzen ist.

Hat das jemand schon erfolgreich umgesetzt und einen Denkanstoß für mich?

Im nächsten Schritt muss ich auch noch ein Enddatum eingeben, es soll also schlussendlich eine Datenrange sein, aber erstmal sollte das Startdatum funktionieren.

Nach langem Probieren hier nun meine Lösung.
Ich erstelle ein Formular mit 2 Datumsfeldern und 2 versteckten Feldern zur Übergabe der Daten ins richtige Format, damit der Filter des Catalog Managers das Datum richtig auslesen kann.

Code:

---

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('id_form_1');
  const fromInput = document.getElementById('ctrl_1');
  const toInput = document.getElementById('ctrl_2');

  // Versteckte Felder für formatiertes Datum (werden ggf. erstellt)
  let fromFormatted = document.getElementsByName('date_from_formatted')[0];
  let toFormatted = document.getElementsByName('date_to_formatted')[0];

  if (!fromFormatted) {
    fromFormatted = document.createElement('input');
    fromFormatted.type = 'hidden';
    fromFormatted.name = 'date_from_formatted';
    fromFormatted.id = 'date_from_formatted';
    form.appendChild(fromFormatted);
  }

  if (!toFormatted) {
    toFormatted = document.createElement('input');
    toFormatted.type = 'hidden';
    toFormatted.name = 'date_to_formatted';
    toFormatted.id = 'date_to_formatted';
    form.appendChild(toFormatted);
  }

  // Hilfsfunktion: URL-Parameter auslesen
  function getUrlParameter(name) {
    const params = new URLSearchParams(window.location.search);
    return params.get(name);
  }

  // Werte aus URL-Parametern holen (z.B. ?date_from=2025-06-03&date_to=2025-06-10)
  let fromValue = getUrlParameter('date_from');
  let toValue = getUrlParameter('date_to');

  // Heutiges Datum im Format YYYY-MM-DD
  const today = new Date().toISOString().split('T')[0];

  // "Datum von" setzen: GET-Wert oder heute
  if (fromValue && /^\d{4}-\d{2}-\d{2}$/.test(fromValue)) {
    fromInput.value = fromValue;
  } else {
    fromInput.value = today;
  }
  fromInput.min = today;

  // "Datum bis" setzen: GET-Wert oder leer
  if (toValue && /^\d{4}-\d{2}-\d{2}$/.test(toValue)) {
    toInput.value = toValue;
  } else {
    toInput.value = "";
  }
  toInput.min = fromInput.value;

  // Event-Listener: "Datum von" geändert
  fromInput.addEventListener('change', function() {
    toInput.min = fromInput.value;
    if (toInput.value && toInput.value < fromInput.value) {
      toInput.value = "";
    }
  });

  // Event-Listener: "Datum bis" geändert
  toInput.addEventListener('change', function() {
    fromInput.max = toInput.value;
    if (fromInput.value > toInput.value) {
      fromInput.value = toInput.value;
    }
  });

  // Hilfsfunktion zum Formatieren von yyyy-mm-dd zu dd.mm.yyyy
  function formatDate(dateStr) {
    if (!dateStr) return "";
    const parts = dateStr.split('-');
    if (parts.length !== 3) return "";
    return parts[2] + '.' + parts[1] + '.' + parts[0];
  }

  // Beim Absenden des Formulars die Werte formatieren und in versteckte Felder schreiben
  form.addEventListener('submit', function() {
    fromFormatted.value = formatDate(fromInput.value);
    toFormatted.value = formatDate(toInput.value);
  });
});
</script>

---

Vielleicht hab ich auch total um die Ecke gedacht, aber ich bin erstmal froh, überhaupt eine Lösung zu haben.