_PAKETDOWNLOADEN
PDF-Download

Anzeige

Auf unzähligen Seiten sind die Datumspicker mittlerweile zu sehen. Dank derer lassen sich die gewünschten Termine ganz einfach auswählen.
[Beispiel anzeigen]




Wollte man "früher" eine solche Anwendung erstellen, musste man vergleichsweise viel Code eintippen. Da kamen schnell 100 und mehr Zeilen zusammen. Kein Wunder, schließlich musste man u.a. Arrays mit den Monats- und Wochennamen definieren.

function show_calendar(str_target, str_datetime) {
 var arr_monate = ["Januar", "Februar", "März", "April", "Mai", "Juni",
 "Juli", "August", "September", "Oktober", "November", "Dezember"];
 var array_tage = ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"];
…
}

Hinzu kamen die verschiedenen JavaScript-Datumsfunktionen. Das alles führte zu sehr umfangreichen und leider auch fehleranfälligen Skripten. Heutzutage lassen sich solche Datumspicker viel einfacher erstellen. Eine der komfortabelsten Varianten ist dabei sicherlich der Datumspicker von jQuery UI. Dieser ist zunächst einmal im Handumdrehen eingebunden. Und auch anpassen lässt er sich vergleichsweise einfach. Sollten Sie bislang noch keine Erfahrungen mit jQuery UI gesammelt haben, finden Sie auf PSD-Tutorials.de ein entsprechendes Einsteigertutorial.

jQuery UI stellt einen Datumspicker zur Verfügung. Um diesen nutzen zu können, muss man sich das passende Paket herunterladen. Zentrale Anlaufstelle dafür ist die Seite http://jqueryui.com/download. Aktivieren Sie dort im Bereich Widgets die Option Datepicker und laden Sie sich das personalisierte Paket herunter. Das Zip-Archiv enthält verschiedene Verzeichnisse.




Für die aktuelle Anwendung sind jedoch lediglich js und css relevant. Binden Sie zunächst die beiden JavaScript-Dateien, die im js-Verzeichnis liegen, in Ihre Webseite ein. Das könnte z.B. folgendermaßen aussehen:

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

Weiter geht es mit der Definition des Textfeldes, in dem später das ausgewählte Datum angezeigt werden soll.

<p>Datum: <input id="datum" type="text"></p>

Entscheidend ist hier der Wert des id-Attributs. Denn dieser muss auch im eigentlichen Skript verwendet werden. Der Skriptbereich selbst ist sehr übersichtlich.

<script type="text/javascript">
 $(function() {
 $("#datum").datepicker();
 });
</script>

Entscheidend ist der Aufruf von datepicker(). Damit ist der Datumspicker in seiner einfachsten Form bereits einsatzbereit. Das zeigt auch ein Blick auf das Ergebnis:
[Beispiel anzeigen]




Klickt man in das Textfeld, öffnet sich ein Kalender, über den das gewünschte Datum ausgewählt werden kann. Damit der Datumspicker allerdings tatsächlich praxistauglich ist, müssen noch einige Verbesserungen vorgenommen werden:

• Der Kalender sollte mit CSS-Formatierungen verknüpft werden.
• Es sollte eine deutsche Übersetzung eingefügt werden.
• Möglicherweise muss ein Startdatum gesetzt werden.

Zunächst soll der Datumspicker mittels CSS formatiert werden. Dabei kann man selbst entsprechende Eigenschaften definieren. Nötig ist das aber normalerweise nicht, da es ausreichend vordefinierte Formatierungsarten gibt. Standardmäßig ist in dem heruntergeladenen Zip-Archiv das Verzeichnis css enthalten. Dieses Verzeichnis enthält wiederum standardmäßig das Unterverzeichnis ui-lightness. Die darin enthaltene CSS-Datei kann nun eingebunden werden.

<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" type="text/css" />

Ein anschließender Blick in die Ergebnisseite zeigt, dass die Formatierungen bereits greifen.
[Beispiel anzeigen]




Nun kann es natürlich sein, dass die Farbgestaltung nicht zum restlichen Design Ihrer Webseite passt. Jetzt könnten Sie also die CSS-Datei manuell anpassen. Das ist sehr einfach möglich, allerdings nicht unbedingt notwendig. Denn jQuery UI arbeitet auf Theme-Basis. Mit solchen Themes kann man das Aussehen seiner "jQuery UI"-Applikation sehr einfach verändern. Das zu verwendende Theme legt man direkt beim Download der Paketdatei fest. Verantwortlich für die Theme-Auswahl ist das Auswahlfeld im rechten Fensterbereich.



 
Darüber kann das gewünschte Theme eingestellt werden. Welches Design sich hinter den jeweiligen Namen versteckt, können Sie sich auf der Seite http://jqueryui.com/themeroller/ ansehen. Dort gibt es im linken Fensterbereich das Register Gallery.




Darin sind die Themes aufgeführt. Nachdem Sie sich für ein Theme entschieden haben, laden Sie es über die Downloadseite herunter. (Damit es hier nicht zu Missverständnissen kommt: Das, was man sich herunterlädt, ist wieder das Zip-Archiv, in dem u.a. die Verzeichnisse js und css enthalten sind). Haben Sie sich z.B. für das Theme Dark Hive entschieden, können Sie dieses folgendermaßen einbinden:

<link rel="stylesheet" href="css/dark-hive/jquery-ui-1_7_2_custom.css" type="text/css" />

Alternativ können Sie vor dem Download auch einen eigenen Verzeichnisnamen vergeben. Dazu folgen Sie unterhalb des Theme-Auswahlfeldes dem Link Advanced Theme Settings.




In das Feld Theme Folder Name kann der gewünschte Verzeichnisname eingetragen werden.

Deutsche Datumsangaben

Nachdem Sie sich für ein Theme entschieden haben, sollte der Datumspicker – zumindest dann, wenn er auf einer deutschsprachigen Webseite verwendet wird – übersetzt werden. Das lässt sich vergleichsweise einfach umsetzen. Der Datumspicker stellt nämlich komplexe Lokalisierungsoptionen zur Verfügung. Ausführliche Informationen dazu finden Sie auf der Seite http://docs.jquery.com/UI/Datepicker/Localization. Die einzelnen Optionen an dieser Stelle aufzuführen, würde zu weit gehen und ist außerdem gar nicht nötig. Denn normalerweise sind diese alle selbsterklärend. Das folgende Beispiel zeigt, wie sich die einzelnen Optionen einsetzen lassen.
[Beispiel anzeigen]

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function($){
 $.datepicker.regional['de'] = {clearText: 'enternen', clearStatus: 'Auswahl löschen',
 closeText: 'schließen', closeStatus: 'Änderungen nicht übernehmen',
     prevText: 'vorheriger Monat', prevStatus: 'vorheriger Monat',
     nextText: 'nächster Monat', nextStatus: 'nächster Monat',
     currentText: 'heute', currentStatus: '',
     monthNames: ['Januar','Februar','März','April','Mai','Juni',
                 'Juli','August','September','Oktober','November','Dezember'],
     monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                 'Jul','Aug','Sep','Okt','Nov','Dez'],
     monthStatus: 'anderer Monat', yearStatus: 'anderes Jahr',
     weekHeader: 'Wo', weekStatus: 'Woche des Monats',
     dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
     dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
     dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
     dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d',
     dateFormat: 'dd.mm.yy', firstDay: 1, 
     initStatus: 'Bitte wählen Sie ein Datum', isRTL: false};
     $.datepicker.setDefaults($.datepicker.regional['de']);
}); 
$(function() {
 $("#datum").datepicker();
});
/* ]]>
</script>

Das Ergebnis ist ein Datumspicker mit einer deutschsprachigen Benutzeroberfläche.
[Beispiel anzeigen]

Das Startdatum setzen

Eine oft benötigte Funktion ist das explizite Setzen eines Startdatums für den Kalender. So möchte man z.B. erreichen, dass die Besucher nur ein Datum auswählen können, das frühestens in einer Woche ist. Auch so etwas ist sehr einfach möglich. Verwendet wird dafür die Option minDate.
[Beispiel anzeigen]

$(function() {
    $("#datum").datepicker({ 
   minDate: +7 
 });
 })

Dieser Option übergibt man die gewünschte Anzahl der Tage, die das auszuwählende Datum in der Zukunft liegen muss.

Fazit

Eigentlich ist es ganz einfach, sich auf Basis von jQuery UI einen Datumspicker für seine Webseite zu gestalten. Dank der Themes und der Lokalisierungsoptionen lässt sich das Datumsfeld dann auch noch optisch äußerst variabel gestalten.


Rechtschreibung geprüft und für PDF optimiert von stellamarina