Core-Datepicker: Usability

[DetlefT]

Hallo zusammen,

da ich jetzt erstmalig eine Eventverwaltung in Contao einbaue, sind mir im BE bei der Eventeingabe die beiden Datepicker bei Start- und bei Enddatum aufgefallen. Diese stehen per default beide auf "heutiges Datum" - was ja durchaus Sinn macht. Wenn ich jetzt ein Startdatum z.B. 2 Monate in der Zukunft eingebe, bleibt der Enddatum-Datepicker beharrlich auf dem heutigen Datum stehen. Da das Enddatum ja ziemlich schlecht vor dem Startdatum liegen kann, würde es ja durchaus Sinn machen, den Enddatum-Datepicker auf das Startdatum nachzuführen. Kenne ich so von bisher allen besuchten Reisebuchungsportalen. Spart dem Anwender im Beispiel 2 Klicks, um sich auf den Startmonat vorzuarbeiten. Wenn der Event 12 Monate in der Zukunft liegt, kann das schon ganz in Klickarbeit ausarten.
Am Input-Feld "Enddatum" würde ich nichts modifizieren wollen, da es bei eintägigen Terminen ja leer bleiben soll (obwohl man auch da beim Speichern des Events abfragen könnte, ob Start- gleich Enddatum ist und dann das Feld wieder löschen könnte).

Hat das im Forum schon mal jemand nachgefragt/"bemängelt"? Gibt es gar Lösungen?

Da ich im BE bisher keinerlei "eigene" Modifikationen gemacht habe und meine Skills in php eher bescheiden sind (oder braucht man dazu Ajax oder k.A.?), würde ich wahrscheinlich - wenn überhaupt - nur eine js-Lösung hingefrickelt kriegen.

Danke schon mal für Euer Interesse.

[stefan-at-work]

evt. via jquery_ui
Dann hättest Du ein Dropdown und ersparst dem User ein paar Klicks

[planepix]

Und das gibt es für Contao (Frontend) hier:
https://packagist.org/packages/hofff...-calendarfield

[miniA4kuser]

Das liest sich eher so, als ob die Backend Datepicker für das Event gemeint sind. Hier könnte man ja bei dem Startdatum ein submitOnChange=true einbauen und bei dem Enddatum einen save_callback

[Andreas]

Im BE läuft der MooTools Datepicker. https://github.com/arian/mootools-datepicker

Bei Auswahl eines Datums (onSelect(date)) müssten beim anderen dazugehörigen Datepicker die Variablen minDate und maxDate neu gesetzt werden. Wäre also ein Feature-Request, welches mit JS umgesetzt werden sollte.

[kmielke]

Hi,

ich habe für calendar_extended mal eine Anfrage erhalten, dass Thema mal zu beleuchten.

Wie Andreas schon sagt, müsste es im Core geändert werden. Ich hatte überlegt, die Klasse DataContainer zu klonen, und die Funktion row() anzupassen.

Für den Fall, dass die $objWidget->id = startDate ist...

            onSelect: function(date) {
              if ($("ctrl_endDate").value === "") {
                $("ctrl_endDate").value = $("ctrl_startDate").value;
              } else {
                if ($("ctrl_endDate").value < $("ctrl_startDate").value) {
                  $("ctrl_endDate").value = $("ctrl_startDate").value;
                }
              }
            } 

würde ich folgendes in das JS einfügen. Aber so richtig gefällt mir der Weg nicht, weshalb ich bisher nichts daran gemacht habe.

Gruß Kester

[DetlefT]

Hallo,

inzwischen ist mir aufgefallen, dass ich da ja sehr selektiv gesehen habe. Datepicker gibt es ja noch an einigen anderen Stellen, an denen meine angedachte Usability-Verbesserung genau so sinnvoll wäre (der 2. Termin liegt immer gleich oder nach dem ersten), als da wäre:

• Benutzergruppen aktivieren/deaktivieren
• Mitgliedergruppen aktivieren/deaktivieren
• Artikel anzeigen ab/bis
• wahrscheinlich bei den Nachrichten

und wahrscheinlich noch einiges mehr (das ich bisher aber noch nicht gebraucht habe).

Wäre also ein Feature-Request, welches mit JS umgesetzt werden sollte.

Hört sich für mich nach der sinnvollsten Methode an. Ich meine mich zu erinnern, dass ich im Forum mal gelesen habe, dass man das auf englisch machen muss. Damit bin ich leider raus. Wer weiß, was Leo nach meinen merkwürdigen englischen Anforderungen Wildes programmieren würde ...

[miniA4kuser]

Wie Andreas schon sagt, müsste es im Core geändert werden. Ich hatte überlegt, die Klasse DataContainer zu klonen, und die Funktion row() anzupassen.

Dabei aber auch die Standardfunktionalität beachten für den submitOnChange:

// Trigger the auto-submit function (see #8603)
if ($arrData['eval']['submitOnChange'])
{
    $strOnSelect = ",\n        onSelect: function() { Backend.autoSubmit(\"" . $this->strTable . "\"); }";
} 

[kmielke]

Dabei aber auch die Standardfunktionalität beachten für den submitOnChange:

// Trigger the auto-submit function (see #8603)
if ($arrData['eval']['submitOnChange'])
{
    $strOnSelect = ",\n        onSelect: function() { Backend.autoSubmit(\"" . $this->strTable . "\"); }";
} 

Ja, danke... Ich sagte ja, dass es mir eigentlich nicht gut gefällt dieser Ansatz.
Ich denk auch, dass der Weg mit dem Feature Request der richtige ist.

[Andreas]

@DetlevT: Wenn du dich nicht fit genug im Englischen fühlst, kannst du ein Ticket auch auf Deutsch anlegen.

Weitere Ansätze:

1. Es braucht eine Möglichkeit zwei Inputs miteinander zu "verschränken" . Z.B. mit Klassen "picker_42 picker_minDate", "picker_42 picker_maxDate".

2. Der Picker müsste als Variable deklariert werden, um ihn dynamisch ansprechen zu können.

Bisher

<script>
  window.addEvent("domready", function() {
    new Picker.Date($("ctrl_' . $objWidget->id . '"), { 

Neu

<script>
  window.addEvent("domready", function() {
    picker_ctrl_' . $objWidget->id . ' = new Picker.Date($("ctrl_' . $objWidget->id . '"), { 

3. So könnte man das minDate mit onSelect neu setzen

<script>
  window.addEvent("domready", function() {
    picker_ctrl_' . $objWidget->id . ' = new Picker.Date($("ctrl_' . $objWidget->id . '"), {
      draggable: false,
      toggle: $("toggle_' . $objWidget->id . '"),
      format: "' . $format . '",
      positionOffset: {x:-211,y:-209}' . $time . ',
      pickerClass: "datepicker_bootstrap",
      useFadeInOut: !Browser.ie' . $strOnSelect . ',
      startDay: ' . $GLOBALS['TL_LANG']['MSC']['weekOffset'] . ',
      titleFormat: "' . $GLOBALS['TL_LANG']['MSC']['titleFormat'] . '",
      // Neu:
      onSelect: function(date, element){
        console.log(date);
        console.log(element);
        picker_ctrl_endDate.setOptions({
          minDate: date
        });
      }
    });
  });
</script>' 

[miniA4kuser]

Wobei man auch bei JavaScript globale Variablen vermeiden sollte, um späteren Konflikten mit anderen Scripts vorzubeugen.

Auch bei deinem Beispiel gibt es dann aber auch den Konflikt mit dem submitOnChange, welchen man ja im DCA definieren kann.

[µaTh]

ich habe mir folgende Extension geschrieben:
https://contao.org/de/erweiterungsli...000029.de.html

klickst du in das Datumsfeld, dann öffnet sich sofort der Kalender. Mit ein paar Shortcuts kannst du das Datum eintragen.

Besonders spannend ist die Shortcut-Funktion für das Enddatum-Feld (z.B.: Startdatum auf 1.1.2017 setzen, dann ins Enddatum-Feld gehen und "+1" eintragen. Herauskommt 2.1.2017). Weitere Shortcuts siehe Extensionbeschreibung.

Über ein Feedback würde ich mich freuen.

[Andreas]

Dafür extra jQuery im BE laden zusätzlich zu MooTools? Du solltest das in MooTools programmieren. MooTools ist sehr einfach und die Doku ist übersichtlicher als die von jQuery.

[miniA4kuser]

Eine MooTools Version fände ich auch harmonischer. Was die Doku angeht, naja ... das ist und bleibt halt Geschmackssache