Anzeige
Tutorialbeschreibung

jQuery - Einen Datumspicker erstellen

jQuery - Einen Datumspicker erstellen

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.


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.

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von staengls
  • 17.11.2013 - 19:32

Bin auf der Suche nach einem Datumspicker gewesen und so auf diese Webseite gestoßen! Da kann ich sicher noch mehr mitnehmen! Vielen Danke für die tolle Arbeit

Portrait von neo862
  • 09.11.2010 - 10:38

super, hätte mir zwar gewünscht das etwas mehr auf die unterschiedlichen Möglichkeiten eingegangen wird, aber für einen Einstieg reichts. Danke

Portrait von exo

exo

  • 17.10.2010 - 22:48

tja nur doof dass das ganze nicht mehr funktioniert wenn ich mehr als ein datumsfeld auf einer website hab...

Portrait von Lordi
  • 24.09.2010 - 10:44

schön, an dem Thema bin ich auch gerade dran, gut das ich das hier gefunden habe, wird mir sicherlich helfen können.

Portrait von stevexx
  • 22.05.2010 - 02:38

super funktion! habe allerdings nicht verstanden was "A id=_GoBack2 name=_GoBack" ist.

Portrait von kello
  • 15.05.2010 - 12:10

super tut genau das, was ich brauche!!

Lg

Portrait von kultig_ibk
  • 28.04.2010 - 10:58

super anleitung, was mir beim datepicker allerdings noch fehlt ist die möglichkeit jahr und monat getrennt auszuwählen (bräuchte das für die auswahl des geburtsdatums - und da würde man sich auf dauer wundklicken ;-) )
hat dafür zufällig wer eine idee? danke :-)

Portrait von stevexx
  • 22.05.2010 - 01:11

genau das mit der jahreszahl würde ich benötigen. gibt es da schon eine möglichkeit?

Portrait von nellynelly
  • 27.02.2010 - 21:10

danke danke .... gerade arbeite ich an so was ähnliches

Portrait von vanad59
  • 20.02.2010 - 18:49

Danach habe ich schon lange gesucht, werde ich noch oft brauchen, vielen Dank

Portrait von Sincer
  • 19.02.2010 - 15:46

ho ;)

Vielen Dank für die Anleitung.
Durch die vielen Codebeispiele war das ganze sehr verständlich.

thx
Sincer

Portrait von derconditor
  • 17.02.2010 - 11:04

gut gemachtes Tutorial! einen Dank an den Autor!

Portrait von helgeschneider
  • 17.02.2010 - 11:00

Schöne Idee kannte ich bisher nicht danke dafür

Portrait von Servusmen
  • 16.02.2010 - 18:38

Hey! Ein echt super tutorial! Wie sehr doch jquery uns das Leben vereinfacht =) !

Portrait von Kaschparl79
  • 16.02.2010 - 09:36

Wunderbar! Jetzt habe ich wieder ein neues Tutorial zum Thema JQuery.
Langsam weiß ich echt nicht mehr, welches das letzte Tutorial war, dass ich durchgearbeitet / angesehen / nachgebaut habe und mit welchem ich jetzt weitermachen soll.
Die Tutorials sind einfach spitze. Vielen Dank an den Autor.

Portrait von watjah
  • 16.02.2010 - 08:38

Ist mir (noch) ein bisschen zu kompliziert... Aber da werde ich schon noch hinkommen! Danke.

Portrait von jellyfish76
  • 15.02.2010 - 17:50

Vielen Dank für dieses tolle Tutorial. Sowas habe ich schon lange gesucht :)

x
×
×