Gästebuch   Impressum

 

>> Startseite    >> Scripting    >> Formular: jquery Datumpicker ***  
 

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?

css-code-in-nofEigentlich 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.

css-code-in-nof2

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

css-code-datepicker

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

 


dieses tutorial

version: alle versionen
Schwierigkeitsgrad:
Teil 1: leicht
Teil 2: kniffelig
deutsche Änderungen getestet in ie6, ie7 ff3.5.5

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten
 

-
Fatal error: Uncaught Error: Call to undefined function ereg_replace() in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/formular_datepicker_in_netobje.php:354 Stack trace: #0 {main} thrown in /kunden/290678_86558/rp-hosting/1/1/web/nof-tips/jquery-netobjects-fusion/formular_datepicker_in_netobje.php on line 354