Ergebnis 1 bis 2 von 2

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

  1. #1
    Contao-Nutzer
    Registriert seit
    12.03.2012.
    Ort
    Dresden
    Beiträge
    247

    Standard [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.

  2. #2
    Contao-Nutzer
    Registriert seit
    12.03.2012.
    Ort
    Dresden
    Beiträge
    247

    Standard

    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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •