Calendar Text Input

Updated this example to work with YUI Version .12. The original can be found here.

Here is an example on how to attach a popup calendar to a text input. Just place your cursor in the text box & the calendar will appear.

The HTML/PHP

The Javascript

var cal1;
var over_cal = false;
function init() {
    cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
    cal1.selectEvent.subscribe(getDate, cal1, true);
    cal1.renderEvent.subscribe(setupListeners, cal1, true);
    YAHOO.util.Event.addListener('cal1Date', 'focus', showCal);
    YAHOO.util.Event.addListener('cal1Date', 'blur', hideCal);
    cal1.render();
}

function setupListeners() {
    YAHOO.util.Event.addListener('cal1Container', 'mouseover', overCal);
    YAHOO.util.Event.addListener('cal1Container', 'mouseout', outCal);
}

function getDate() {
        var calDate = this.getSelectedDates()[0];
        calDate = (calDate.getMonth() + 1) + '/' + calDate.getDate() + '/' + calDate.getFullYear();
        YAHOO.util.Dom.get('cal1Date').value = calDate;
        over_cal = false;
        hideCal();
}

function showCal() {
    var xy = YAHOO.util.Dom.getXY('cal1Date');
    var date = YAHOO.util.Dom.get('cal1Date').value;
    if (date) {
        cal1.cfg.setProperty('selected', date);
        cal1.cfg.setProperty('pagedate', new Date(date), true);
        cal1.render();
    }
    YAHOO.util.Dom.setStyle('cal1Container', 'display', 'block');
    xy[1] = xy[1] + 20;
    YAHOO.util.Dom.setXY('cal1Container', xy);
}

function hideCal() {
    if (!over_cal) {
        YAHOO.util.Dom.setStyle('cal1Container', 'display', 'none');
    }
}

function overCal() {
    over_cal = true;
}

function outCal() {
    over_cal = false;
}

YAHOO.util.Event.addListener(window, 'load', init);

YUI: Calendar attached to Text Input (YUI Version .12)

The HTML/PHP

The Javascript