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 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 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, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

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

Kommentare

  • Alternative Portrait von neo862

    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

  • Alternative 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...

  • Alternative Portrait von Lordi

    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.

  • Alternative Portrait von stevexx

    stevexx

    22.05.2010 - 02:38

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

  • Alternative Portrait von kello

    kello

    15.05.2010 - 12:10

    super tut genau das, was ich brauche!!

    Lg

  • Alternative Portrait von kultig_ibk

    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 :-)

    • Alternative Portrait von stevexx

      stevexx

      22.05.2010 - 01:11

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

  • Alternative Portrait von nellynelly

    nellynelly

    27.02.2010 - 21:10

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

  • Alternative Portrait von vanad59

    vanad59

    20.02.2010 - 18:49

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

  • Alternative Portrait von Sincer

    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

  • Alternative Portrait von derconditor

    derconditor

    17.02.2010 - 11:04

    gut gemachtes Tutorial! einen Dank an den Autor!

  • Alternative Portrait von helgeschneider

    helgeschneider

    17.02.2010 - 11:00

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

  • Alternative Portrait von Servusmen

    Servusmen

    16.02.2010 - 18:38

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

  • Alternative Portrait von Kaschparl79

    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.

  • Alternative Portrait von watjah

    watjah

    16.02.2010 - 08:38

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

  • Alternative Portrait von jellyfish76

    jellyfish76

    15.02.2010 - 17:50

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

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

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.044 • ZF-App 0.498 • Total 0.542