11. Januar 2012
jQuery UI Datepicker - Jedem Tag eine ID zuweisen

jQuery UI Datepicker - Jedem Tag eine ID zuweisen

Im jQuery UI Paket gibt es einen wunderbaren Datepicker. Dieser Datepicker hat aber den Nachteil, dass einzelne Tage nicht so einfach per CSS oder JS angesprochen werden können, weil sie keine eindeutige ID oder Klasse haben. Das Problem ist jedoch, dass ich Daten aus einem AJAX-Call nachträglich im Kalender einfärben möchte. Mit dem Gefühl das es mich einiges an Zeit kosten würde, habe ich mich dieser Sache mal angenommen. Dafür habe ich mir erstmal das komplette jQuery UI Paket besorgt (Download). In diesem Paket liegen dann die einzelnen, unkomprimierten JS-Dateien. Im Ordner development-bundleui fand ich dann eine Datei jquery.ui.datepicker.js.

Nach kurzer Suche bin ich in den Zeilen 1534 bis 1553 fündig geworden. Hier befindet sich der Part in dem die einzelnen Tage als -Tag mit -Tag generiert werden. Ich habe dann mit ein paar Formatierungen und vorhandenen Methoden das bereits im Script verwendete Datum ausgelesen und als id an den -Tag in Zeile 1549 angehangen.

Zeile 1549 vorher:

(unselectable ? "" + printDate.getDate() + "" : "

und danach mit meinen Anpassungen:

(unselectable ? "" + printDate.getDate() + "" : "
id="" + printDate.getFullYear() + "-" + (printDate.getMonth() + 1) + "-" + printDate.getDate() + "" class="ui-state-default" +

Diese *.js-Datei nun einfach nach der regulären Einbindung von jQuery.UI in das Dokument einbinden:

Und nun hat jeder Tag eine einzigartige ID.

Dazu noch folgender Hinweis: Manche Tage werden durch die aktuelle Darstellungsform bei der gleichzeitigen Anzeige mehrerer Monate doppelt angezeigt. Diese doppelten Tage lassen sich eindeutig ansprechen, indem man zusätzlich die Klasse ui-state-default filtert oder im Zweifelsfall auch den Monaten eine eindeutige ID gibt.