Pimp my Form: Formular mit dem Datepicker aufmotzen

Pensions- und Hotelbuchungen - Termine - Datum - Überall, wo in ein Formular ein Datum automatisch ausgewählt werden soll, ist der Datepicker eine hübsche und bequeme Möglichkeit, dem User, die Datumsauswahl etwas zu erleichtern.

Datepicker gibt es in verschiedenen Versionen. Ich hab mal die jQuery-Version ausgesucht, da wir hier zum Teil auf externe Bibliotheken zugreifen können. Alternativ gibt es auch eine hübsche Version von Tigra, deren Einbau letztlich identisch ist.

So schauts dann aus (traut euch: einfach mal anklicken und grinsen)
 

Datum:

Teil 1: Einbau in NOF in zwei Schritten

Die schnelle Version können auch ungeübte User mit wenigen Klicks auf ihre Seite einbauen. Es sind keine Änderungen in NOF notwendig. Klick, klick, fertig.... ;-)

Das kommt zwischen die Headtags der Seite

Wer viele jQuery-Anwendungen nutzen möchte, kann es mit F10 in den Masterrahmen legen, aber da wir das jQuery nur für ein Formular nutzen möchten, reicht es, wenn wir die js-Dateien in den Layoutbereich legen. (Wer bereits die jQuery-Box im Einsatz hat, sollte die Masterborder nutzen)

1. Wir drücken also F9
2. es öffnen sich die Layouteigenschaften
3. wir klicken auf den HTML-Button
4. es öffnet sich ein Fenster
5. hier fügen wir ein:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

Google bietet die jQuery-Dateien extern an! Das hat den Vorteil, dass wir jetzt bereits fertig sind. Die notwendigen js-Dateien müssen nicht als Asset eingefügt werden.

Das kommt ins Formular

Da wir faul sind, erstellen wir nicht erst ein Eingabefeld - das ist im Schnipsel schon enthalten. Auf die gewohnte Weise fügen wir unseren HMTL-Code in die gewünschte Zeile/Zelle.

1. Kursor platzieren
2. Text/HTML einfügen
3. Fenster geht auf
4. wir tragen ein

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

eigentlich sind wir jetzt schon fertig:
wenn ihr publiziert, sollte der Datepicker sich bereits in seiner ganzen Pracht zeigen...

Huch!! - Das ist ja englisch...

Räusper... - dafür kann ich nix - soweit mir bekannt, gibt es die Bibliotheken nur in englisch. Aber wer genau schaut, sieht, dass mein Datepicker deutsch ist. Ich hab mich auf die Suche gemacht und in den unendlich vielen Zeilen Code aus der jQuery-Datei die relevanten Zeilen Code gefunden, geändert und in eine eigene Datei gelegt. Ich habe nur die notwendigen Zeilen dort reingeschrieben - alles andere kommt weiterhin aus dem Original, um eventuelle Updates der externen Datei weiterhin automatisch zu erhalten.

Anmerkung: ich bin alles andere als eine Java-Script-Könnerin - Ich hoffe inständig, dass ich die richtigen Bereiche gefunden hab und nix zerlegt wurde (naja, zumindest klappten die Tests im ie und ff). Browser-Tests, Tips oder Fehlermeldungen von Wissenden sind willkommen.

Wer den Datepicker in deutsch haben möchte, läd sich jetzt folgende Datei runter und packt sie doch als neues Asset in sein NOF-Projekt: jquery-datepicker-de.js (falls sich die Datei im Editor öffnet - schlucken - lächeln und speichern unter nutzen)

Damit diese Datei auch genutzt wird kommt eine Erweiterung zwischen die Headtags der Seite:

<script src="../assets/jquery-datepicker-de.js" type="text/javascript"></script>

Wichtig: diese Einfügung muss NACH den ersten Einfügungen stehen, sonst stimmt die Reihenfolge der Importe nicht - wenn die Datei als neues Asset eingebunden wurde, stimmt der Pfad jetzt schon.

Insgesamt steht dort also jetzt:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="../assets/jquery-datepicker-de.js" type="text/javascript"></script>

Teil 2: Eigenes CSS - den Look anpassen

Eigentlich ist der Datepicker jetzt schon sehr hübsch, weil wir auch eine externe CSS-Datei eingebunden haben. Diese CSS-Datei ist ziemlich umfangreich und ich erspare euch jetzt mal die gesamte Aufarbeitung des Codes (ehrlich gesagt, ich versteh auch nicht alles)

Wer aber eigene Farben nutzen möchte, kann folgende Passage in die site.css einfügen:

/* Datepicker
----------------------------------*/
.ui-datepicker .ui-datepicker-header { position:relative; padding:0.2em 0;
background-color : rgb(0,255,255) ;
background-image : none;
border : 1px solid rgb(0,0,255)}
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center;
background-color : rgb(255,0,255) }
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0 }
.ui-datepicker select.ui-datepicker-month-year {width: 100%}
.ui-datepicker select.ui-datepicker-month{ width: 49%}
.ui-datepicker select.ui-datepicker-year { width: 49%}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right }
.ui-datepicker table {width: 100%; font-size: 0.9em; border-collapse: collapse; margin:0 0 0.4em ;
background-color : rgb(204,204,51)}
.ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: bold; border: 0  ;
color : rgb(128,0,128)}
.ui-state-default{ border: 1px solid #cccccc; background: #f6f6f6; font-weight: bold; color: #1c94c4; outline: none }
.ui-state-default a{ color: #1c94c4; text-decoration: none; outline: none }
 .ui-state-default a:link{ color: #1c94c4; text-decoration: none; outline: none }
 .ui-state-default a:visited { color: #1c94c4; text-decoration: none; outline: none }
 .ui-state-focus{ border: 1px solid #fbcb09; background: #fdf5ce; font-weight: bold; color: #c77405; outline: none }
 .ui-widget-content .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce; font-weight: bold; color: #c77405; outline: none }
.ui-state-active{ border: 1px solid #fbd850; background: #ffffff ; font-weight: bold; color: #eb8f00; outline: none }
 .ui-widget-content .ui-state-active { border: 1px solid #fbd850; background: #ffffff ; font-weight: bold; color: #eb8f00; outline: none }
.ui-state-active a{ color: #eb8f00; outline: none; text-decoration: none }
 

In die Style.css einfügen?? Wie geht das bitte?

Eigentlich wäre das ein eigenes Tutorial wert, aber machen wir es jetzt mal im Schnell-Durchgang ;-)

Klickt euch in eure Style-Ansicht. Ab NOF 10 könnt Ihr den CSS-Code im oberen CSS-Reiter aufrufen. Es öffnet sich eine Ansicht, die einem erstmal die Tränen in die Augen treibt. Todesmutig fügen wir nun entweder ganz unten oder ganz oben den obigen code ein. Danach sollte es ungefähr so aussehen.

Wenn wir jetzt in die Seitenansicht wechseln, werden wir gefragt, ob wir die Änderung speichern wollen - wir bestätigen das und sind fertig

Igitt!! Wie häßlich ist das denn!!!

Zugegeben, dass ist ziemlich heftig - aber etwas Arbeit muss sein. Und da wahrscheinlich die wenigsten von euch bisher die Selektoren in der Style-Ansicht angewendet haben, nutzen wir die Gelegenheit und wechseln nochmal in die Style-Ansicht und klicken nun auf den Reiter Selektoren. Siehe da: es zeigen sich die Datepicker-Einstellungen

hier heißt es jetzt: tapfer anklicken und im Eigenschaftenfenster einfach mal schauen, wo die olle Paby die grauenhaften Farben versteckt hat. Anklicken - ändern.

Und bevor es wieder Einwände hagelt: Die Könner machen das NATÜRLICH direkt in der CSS-Datei

Wer hier überfordert ist, nimmt die Einfügung aus der CSS-Datei einfach wieder raus und lässt es halt gelb (ist ja soo tragisch nicht) - wer es haben will, aber nicht hinkriegt, meldet sich per Mail beim Support

Das wars - viel Spaß damit