calpick.js
JavaScript DHMTL Kalenderauswahl. Erzeugt einen klickbaren Button
hinter Eingabefeldern, über die mit einem Office-ähnlichen Kalender
das Datum ausgewählt werden kann, dass dann in das entsprechende
Eingabefeld eingetragen wird.
Inspiriert vom und mit konzeptionellen Anleihen beim Kalender-Element
von Jason Moon (webmaster@moonfam.net)
Version 0.6 - die aktuelle Version gibt's immer unter
http://flocke.vssd.de/prog/code/js/calpick/
Copyright (C) 2005, 2006, 2007 Volker Siebert <flocke@vssd.de>
Alle Rechte vorbehalten.
Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE.
---------------------------------------------------------------------------
Getestete Browser:
- Internet Explorer:
7.0 (erfolgreich)
6.0 (erfolgreich)
- Firefox:
1.0.4 (erfolgreich)
1.5.x (erfolgreich)
2.0.x (erfolgreich)
- Opera:
6.01 (nicht erfolgreich)
7.11 (erfolgreich)
8.52 (erfolgreich)
9.20 (erfolgreich)
Die beiliegenden Dateien
- calpick.js
- calbutton.gif
- calprev.gif
- calnext.gif
stellen mit DHTML einen Office-ähnlichen Kalender dar, über den ein Datum
ausgewählt und in ein Eingabefeld eingetragen werden kann.
Alle vier Dateien werden benötigt.
Benutzung:
Einmal muss man in der Datei die JavaScript-Datei laden:
<script type="text/javascript" src="calpick.js"></script>
Danach kann man in Formularen jeweils hinter die Eingabefelder für ein
Datum ein Auswahlbutton setzen:
<form name="Eingabeformular">
...
<input name="Geburtstag" type="text" value="14.08.2007" size="10"/>
<script type="text/javascript">
AttachCalendarButton(document.Eingabeformular.Geburtstag);
</script>
...
</form>
Die Funktion AttachCalendarButton kann beliebig oft aufgerufen werden,
somit können beliebig viele Eingabefelder bedient werden (alle bekommen
einen eigenen Button).
Der Internet Explorer hat den ärgerlichen Bug, dass Auswahllisten
(Comboboxen) *IMMER* über allen anderen Elementen der Seite liegen.
Deshalb werden Boxen, die von der Kalenderauswahl überlappt werden,
automatisch vorher aus- und danach wieder eingeblendet.
Sprachabhängige Dinge lassen sich unter "Localization" (Zeilen 35-43)
einstellen, allerdings muss ich anmerken, dass die freie Formatierung des
Datums noch nicht funktioniert. Das Element funktioniert *NUR* mit DMY.
Das Layout lässt sich unter "Display & behaviour settings" (Zeilen 46-66)
einstellen. In der Zeile 69 kann man den Pfad zu den Bildern ändern, sofern
diese nicht im selben Pfad wie die HTML-Datei liegen.
Alle diese Variablen lassen sich auch einstellen, indem man die Variablen
einfach vor dem Einbinden von "calpick.js" ändert. Beispiel:
<script type="text/javascript">
var _calPickDir = 'calpick/';
</script>
<script type="text/javascript" src="calpick/calpick.js"></script> |
