Calendar (Multi Select) Text Input

Updated this example to work with YUI Version .12.

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.

Select Date:

var cal1;
var over_cal = false;
function init() {
    /*cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { MULTI_SELECT: true });*/
    cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { MULTI_SELECT: true, close: true, selected: '' });
    cal1.selectEvent.subscribe(getDate, cal1, true);
    //Added this to update the text input when you deselect a date
    cal1.deselectEvent.subscribe(getDate, cal1, true);
    cal1.renderEvent.subscribe(setupListeners, cal1, true);

$E.addListener('cal1Date', 'focus', showCal);
    $E.addListener('cal1Date', 'blur', hideCal);
    cal1.render();
}

function setupListeners() {
    $E.addListener('cal1Container', 'mouseover', overCal);
    $E.addListener('cal1Container', 'mouseout', outCal);
}

function getDate() {
        var calDate = this.getSelectedDates();
        var calDateStr = [];
        for (var i = 0; i < calDate.length; i++) {
            calDateStr[calDateStr.length] = (calDate[i].getMonth() + 1) + '/' + calDate[i].getDate() + '/' + calDate[i].getFullYear();
        }
        $('cal1Date').value = calDateStr.join(',');
        //Removed this so that the calendar doesn't disappear when you select a date
        //over_cal = false;
        //hideCal();
}

function showCal() {
    var xy = $D.getXY('cal1Date');
    $D.setStyle('cal1Container', 'display', 'block');
    xy[1] = xy[1] + parseInt($T.getHeight('cal1Date')) + 3;
    $D.setXY('cal1Container', xy);
    // Added this if statement to check if the text input has a value
    // If it does then set the config object and re-render the calendar
    if ($('cal1Date').value) {
        cal1.cfg.setProperty('selected', $('cal1Date').value);
        cal1.render();
    }
}

function hideCal() {
    if (!over_cal) {
        $D.setStyle('cal1Container', 'display', 'none');
    }
}

function overCal() {
    over_cal = true;
}

function outCal() {
    over_cal = false;
}

$E.addListener(window, 'load', init);

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