Tage im jQuery UI Datepicker hervorheben

Datepicker von jQuery UI mit hervorgehobenen Tagen

Manchmal möchte man in einem Datepicker einzelne Tage besonders hervorheben. In einem aktuellen Projekt habe ich eine Übersicht von Veranstaltungen. Diese sind in einer Tabelle aufgeführt. Über der Tabelle befinden sich einige Filtermöglichkeiten. So kann der Besucher die Veranstaltungen nach Ort, Thema und Datum filtern. Das Datum für die Filterung kann über einen Datepicker von jQuery UI vorgenommen werden. Da nicht an jedem Tag etwas stattfindet, bräuchte man eine kleine Hilfestellung für den Benutzer. Die Tage mit Veranstaltungen sollen farblich hervorgehoben sein und andere nicht klickbar.

Vorbereitungen

Als erstes muss natürlich jQuery und jQuery UI eingebunden werden.

Anschließend der Datepicker an einem Eingabefeld initiiert. Zusätzlich haben ich in diesem Beispiel alle Tage, an denen Veranstaltungen sind, in einem Array hinterlegt. (Natürlich macht es so in der Realität wenig Sinn, da es sehr viele Daten sein werden. Idealerweise holt man sich die Daten per Ajax.)

Tage hervorheben

Nun geht es an die eigentliche Aufgabe. Um die Tage hervorzuheben, müsste man den aktuell gerenderten Tag mit dem Array abgleichen. Ist der Tag im Array vorhanden, dann bekommt dieser eine zusätzliche Klasse für die Hervorhebung.

Dem Datepicker von jQuery UI kann ein Array mit Optionen übergeben werden. Darunter findet man auch die Option beforeShowDay. Dieser Option wird eine Funktion übergeben, die als Parameter den aktuellen Tag, der gerendert wird, übergeben bekommt. Nun ist es ein Leichtes zu prüfen, ob dieser Tag in dem Array mit den Veranstaltungen ist.

Anbei natürlich eine kleine Demo auf jsfiddle.

Fazit

Die Usability kann in den meisten Fällen durch sehr wenig Aufwand stark verbessert werden. So sieht der Benutzer gleich, an welchen Tagen Veranstaltungen stattfinden und an welchen nicht.

 

ALL-INKL.COM

3 Kommentars zu dem Artikel “Tage im jQuery UI Datepicker hervorheben”

  1. Avatar von Natali
    Natali

    Hi,

    das ist ja ein super tutorial. Hat mir sehr sehr weitergeholfen.

    Allerdings stehe ich vor einem riesen Problem und komme einfach nicht auf die Lösung.

    Ich habe zwei input felder jeweils mit einem Kalender verknüpft. Quasi Startdautm und Enddatum. Nachdem ich das zweite Datum (Enddatum) gewählt habe, spuckt er mir die anzahl der Tage für mein gewählten Zeitraum aus. Beispielweise Startdatum 12.12.2014 und Endatum 20.12.2014. Dann bekomme ich korrekt „Anzahl der tage insgesamt = 8 Tage. Das klappt soweit. Wobei das auch so durcheinander und aus Teilstücken kopiert ist, dass der Code etwas durcheinander ist.

    Jetzt wollte ich bestimmte tage im Kalender markieren (Z.B. 15. und 16. 12.2014). Das sind „besondere Tage“. Das korrekte Anzeigen der Tage inklusive Tooltip klappt ja. Aber ich will zusätzlich eine Extra ausgabe. Nämlich wie bei meinem genanten Beispiel: Anzahl der gesamten tage = 8 UND anzahl der besonderen Tage = 2. Ich will quasi bei der Ausgabe eine unterscheidung. Die königsklasse wären drei Berechnungen. Anzahl der Tage gesamt, Anzahl der Besonderen Tage und Anzahl der „nicht“ besonderen Tage.

    Im internet finde ich zwar tausend Beispiele, wie man besondere Tage deaktiviert und markiert usw. Aber nicht, wie man diese sozusagen zusammengezählt ausgibt.

    Ich hoffe ich habe mich halbwegs verständlich ausgedrückt 🙂

    • Avatar von Alexander Bogomolov
      Alexander Bogomolov

      Hi Natali,

      na da hast du mal eine Anforderung. 🙂
      Ich bin nach einigen Versuchen zu dieser Lösung gekommen:
      http://jsfiddle.net/abogomolov/n6p9z921/

      Das ist nicht ganz perfekt, da man einiges noch auslagern könnte aber ich hoffe, dass es dir hilft.
      Melde dich bei Rückfragen einfach.

      Viele Grüße
      Alex

  2. Avatar von Michi
    Michi

    Hey,
    finde auch, dass das eine super anleitung ist.

    Ich habe ein Ereignis, das ein Startdatum und ein Enddatum hat. Diese schreibe ich in das Array bzw. ich habe es auch schon mit zwei unterschiedlichen Variablen versucht. Die Tage zwischen den beiden Datumswerten sollen alle Markiert werden und der Rest bleibt wie gehabt. Nur komme ich da nicht so recht weiter…

    Hast du schonmal so etwas in der Richtung ausprobiert bzw. eine Lösung dafür?