Yahoo User Interface Kalender Widget

Yahoo bietet mit seinem YUI Framework einen durchaus ansehnlichen Javascript Framework.
Doch trotz umfangreicher Beschreibung und jeder menge Beispiele bleibt die ein oder andere Frage ungeklärt.

Wie, zum Beispiel, verwendet man das Kalender Widget für seine eigenen Formulare. Und das auch noch ohne zusätzliche Buttons?
Yahoo liefert hier leider kein passendes Beispiel mit. Andere Frameworks sind da weit voraus und bieten ein einfaches Kalender Popup.
Aber man kann so ein Kalender Widget auch selbst nachrüsten.Eine häufige Anforderung ist es, ein ganz normales HTML Formular mit ein oder zwei Textfeldern so zu erweitern, dass der Kalender automatisch erscheint, wenn man auf einem der Datumsfelder steht.
Genau für so einen Anwendungsfall gibt es das Yahoo Calendar Widget. In leicht abgewandelter Form kann man damit erstaunlich leicht und ohne weitere Javascript Kenntnisse ansehnliche Kalender Felder erstellen.

Das Formular:
<form action="?" method="post"> Start : <input type="text" id="startdate" value="01.01.2009" maxlength="255" size="20"name="startdate" /><br /> Ende : <input type="text" id="enddate" value="01.12.2009" maxlength="255" size="20"name="enddate" /><br /> <input type="button" onclick="this.form.submit();" value="senden" /> </form>
Wichtig sind die Formular-Feld ID's der beiden Textfelder. Diese werden benötigt um ein Kalender Widget darauf zu registrieren.
Nun noch folgenden Javascript Code:

function calPopUpInit () { new popUpCalendar ('enddate',3); new popUpCalendar ('startdate'); } /* create a calendar popup */ var popUpCalendar = function (objid, pages) { // glue container var el = new YAHOO.util.Dom.get(objid); var nel = document.createElement("div"); nel.style.position = 'absolute'; nel.style.zIndex = '1'; nel.id = objid + '_cal'; // insert in document.body as first element YAHOO.util.Dom.insertBefore(nel, YAHOO.util.Dom.getFirstChild (document.body)); this.objectid = objid; this.cointainerid = nel.id; this.over_cal = false; this.calobj = new YAHOO.widget.CalendarGroup("cal" + objid,this.cointainerid, { START_WEEKDAY: 1, PAGES:(pages ? pages : 1), navigator:true }); this.showCal = function (e, obj) { if (this.cointainerid) obj = this; var xy = YAHOO.util.Dom.getXY(this.id); var datum = YAHOO.util.Dom.get(this.id).value.split('.'); if (!datum || datum == "") { var Zeit = new Date(); datum[1] = Zeit.getMonth()+1; datum[0] = Zeit.getDate(); datum[2] = Zeit.getFullYear(); } var date = datum[1] + '/' + datum[0] + '/' + datum[2]; if (date != '//') { obj.calobj.cfg.setProperty('selected', date, false); obj.calobj.cfg.setProperty('pagedate', datum[1] + '/' + datum[2], false); obj.calobj.render(); } YAHOO.util.Dom.setStyle(obj.cointainerid, 'display', 'block'); xy[1] = xy[1] + 20; YAHOO.util.Dom.setXY(obj.cointainerid, xy); } this.hideCal = function (e, obj) { if (this.cointainerid) obj = this; if (!obj.over_cal) YAHOO.util.Dom.setStyle(obj.cointainerid, 'display', 'none'); } this.getDate = function (e, obj) { if (this.cointainerid) obj = this; var calDate = obj.calobj.getSelectedDates()[0]; calDate = calDate.getDate() + '.' + (calDate.getMonth() + 1) + '.' + calDate.getFullYear(); YAHOO.util.Dom.get(obj.objectid).value = calDate; obj.over_cal = false; obj.hideCal(); } this.setupListeners = function(e, obj) { if (this.cointainerid) obj = this; YAHOO.util.Event.addListener(obj.cointainerid, 'mouseover', obj.overCal, obj); YAHOO.util.Event.addListener(obj.cointainerid, 'mouseout', obj.outCal, obj); } this.overCal = function (e, obj) { if (this.cointainerid) obj = this; obj.over_cal = true; } this.outCal = function (e, obj) { if (this.cointainerid) obj = this; obj.over_cal = false; } this.calobj.selectEvent.subscribe(this.getDate, this.calobj, this); this.calobj.renderEvent.subscribe(this.setupListeners, this.calobj, this); YAHOO.util.Event.addListener(this.objectid, 'focus', this.showCal, this); YAHOO.util.Event.addListener(this.objectid, 'blur', this.hideCal, this); this.calobj.render(this.objectid); this.hideCal(); }
new popUpCalendar ('enddate',3); erstellt ein Kalender Widget für das Formular-Element enddate mit einer 3 Monatsansicht.

Das Code-Schnippsel entstand auf die Schnelle und so wird immer in das deutsche Datumsformat umgewandelt. Wer möchte darf gern an dem Code rumschrauben. Über ein Feedback würde ich mich freuen.


Wichtig! Wenn Sie das Beispiel auf Ihre Seiten übertragen wollen dürfen Sie nicht vergessen die entsprechenden YUI Bibliotheken mit einzubinden!

Sven Ruttloff
Hier ein funktionierendes Beispiel des Kalender Widget auf Basis von YUI:

Start :
Ende :