Tutorial-Steckbrief

jQuery - Einen Datumspicker erstellen

jQuery - Einen Datumspicker erstellen

15.02.2010 in Javascript-Frameworks von daniel_koch

  • Kategorie: Javascript-Frameworks
  • Erstellt mit Programmversion: 1.3.x
  • Kompatibel ab Programmversion: .
  • Dateigröße (PDF): 1.4 MB
  • Bisherige Zugriffe: 2684
Mit der Bibliothek jQuery UI lassen sich fortgeschrittene Anwendungen erstellen, ohne dass man dabei viel Code benötigen würde. Das ist auch bei einer sehr oft benötigten Anwendung der Fall: einem Datumspicker. Über einen solchen Datumspicker kann man ganz einfach das gewünschte Datum auswählen. Wie sich ein Datumspicker erstellen lässt, wird in diesem Tutorial gezeigt. Zusätzlich gibt es Hinweise zur optischen Anpassung und dem Übersetzen der standardmäßig in englischer Sprache verfügbaren Datumsauswahl.
Zum Downloadmanager hinzufügen PDF-Datei herunterladen (1.4 MB)

Über den Autor

Portrait von daniel_koch

daniel_koch

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2.450 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 800 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1.000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, hoffen wir natürlich, dich als neues Mitglied unserer Kreativ-Community begrüßen zu dürfen.

Gratis-Lern-DVD mit 11 Stunden Video-Training

Als Mitglied bekommst du die PSD-Tutorials.de - Selection-DVD mit über 11 Stunden Video-Trainings als Willkommensgeschenk gratis- Downloadlink gibt es in deinem Profil (Kontrollzentrum).

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Tutorial empfehlen

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)

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

Bilder


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.

Bilder


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]

Bilder


 
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]

Bilder


 
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.

Bilder

 
 
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.

Bilder


 
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.

Bilder


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]

Bilder


 

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.
vBulletin 0.058 • ZF-App 0.413 • Total 0.47