Datepicker mit Prototype 1.6.0.1 und Scriptaculous 1.8.1
Mittwoch, 11. Juni 2008 21:28
Seit einiger Zeit benutze ich für verschiedene Projekte den Datepicker von Sven Wappler, der wiederum auf dem Datepicker von Eulerian Studios fußt.
Sinn eines Datepickers ist es, statt zu einer manuellen Datumseingabe aufzufordern einen Kalender anzuzeigen, über den man sein Datum per Klick wählen kann.
Der Datepicker von Sven ist ein wenig hübscher und besser im Handling als das Original, allerdings ist er nicht mit der aktuellen Prototype- bzw. Scriptaculous-Version (1.6.0.1 bzw. 1.8.1) kompatibel, so dass ich die im Moment aktuelle Version von Eulerian folgendermaßen angepaßt habe:
Der Datepicker ist unobtrusive (unaufdringlich,dezent), was bedeutet, dass die entsprechende Funktionalität erst nach dem Laden des Dokuments (onload) dynamisch hinzugefügt wird (sofern Javascript akiviert ist).
Das Einbinden ist recht trivial:
Im <head> der Webseite werden die Javascript-Dateien von Prototype, Scriptaculous und dem Datepicker eingebunden; dazu kommt noch die datepicker.css.
Im <body> folgt dann das Input-Feld, an das der Datepicker gehangen wird:
Mit diesem kurzen Javascript-Schnipsel wird nun an das Element mit der ID date der Datepicker gehangen:
Möchte man mehrere Datepicker einbinden, würde der Code zum Einbinden schnell unübersichtlich, daher empfiehlt sich dieser kleine Javascript-Schnipsel, der alle Objekte mit dem Datepicker versieht, die die css-Klasse 'date' haben (Man sollte natürlich allen Objekten eindeutige IDs zuweisen):
Diese Funktion befindet sich neben Prototype 1.6.0.1, Scriptaculous 1.8.1, der datepicker.js, der datepicker.css den Grafiken und der Beispiel-Datei (index.html) im Download-Paket als datepicker.init.js und kann im <head> der Seite geladen werden.
Hier steht der Datepicker zum Download bereit:
Vielen Dank an Sven und die Eulerian Studios!
Sinn eines Datepickers ist es, statt zu einer manuellen Datumseingabe aufzufordern einen Kalender anzuzeigen, über den man sein Datum per Klick wählen kann.
Der Datepicker von Sven ist ein wenig hübscher und besser im Handling als das Original, allerdings ist er nicht mit der aktuellen Prototype- bzw. Scriptaculous-Version (1.6.0.1 bzw. 1.8.1) kompatibel, so dass ich die im Moment aktuelle Version von Eulerian folgendermaßen angepaßt habe:
Der Datepicker ist unobtrusive (unaufdringlich,dezent), was bedeutet, dass die entsprechende Funktionalität erst nach dem Laden des Dokuments (onload) dynamisch hinzugefügt wird (sofern Javascript akiviert ist).
Das Einbinden ist recht trivial:
Im <head> der Webseite werden die Javascript-Dateien von Prototype, Scriptaculous und dem Datepicker eingebunden; dazu kommt noch die datepicker.css.
HTML4STRICT: (Auswählen)<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/datepicker.js"></script>
<link href="css/datepicker.css" rel="stylesheet" type="text/css" />Im <body> folgt dann das Input-Feld, an das der Datepicker gehangen wird:
HTML4STRICT: (Auswählen)<input type="text" id="date" name="date" class="date" />Mit diesem kurzen Javascript-Schnipsel wird nun an das Element mit der ID date der Datepicker gehangen:
HTML4STRICT: (Auswählen)<script type="text/javascript">
/*<[CDATA[*/
var datepicker = new DatePicker({
relative : 'date',
language : 'de'
});
/*]]>*/
</script>Möchte man mehrere Datepicker einbinden, würde der Code zum Einbinden schnell unübersichtlich, daher empfiehlt sich dieser kleine Javascript-Schnipsel, der alle Objekte mit dem Datepicker versieht, die die css-Klasse 'date' haben (Man sollte natürlich allen Objekten eindeutige IDs zuweisen):
JAVASCRIPT: (Auswählen)function initDatepickers() {
$$("*").findAll(function(node) {
return Element.hasClassName(node,'date');
}).each(function(node) {
datepickers[node.id] = new DatePicker({
relative : node.id,
language : 'de',
enableCloseEffect : false,
enableShowEffect : true,
closeEffect : 'squish',
showEffect : 'appear'
});
datepickers[node.id].setDateFormat([ "dd", "mm", "yyyy" ], ".");
});
}
Event.observe(window, 'load', initDatepickers, false);Diese Funktion befindet sich neben Prototype 1.6.0.1, Scriptaculous 1.8.1, der datepicker.js, der datepicker.css den Grafiken und der Beispiel-Datei (index.html) im Download-Paket als datepicker.init.js und kann im <head> der Seite geladen werden.
Hier steht der Datepicker zum Download bereit:
Vielen Dank an Sven und die Eulerian Studios!
Signatur:Si tacuisses, philosophus manisses.
Erstellung: 0.58548s