Calendar Text Input

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

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        cal1,
        over_cal = false,
        cur_field = '';

var init = function() {
        cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
        cal1.selectEvent.subscribe(getDate, cal1, true);
        cal1.renderEvent.subscribe(setupListeners, cal1, true);
        Event.addListener(['cal1Date1', 'cal1Date2', 'cal1Date3'], 'focus', showCal);
        Event.addListener(['cal1Date1', 'cal1Date2', 'cal1Date3'], 'blur', hideCal);
        cal1.render();
        dp.SyntaxHighlighter.HighlightAll('code'); 
    }

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

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

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

})();

YUI: Calendar attached to Text Input

The HTML/PHP

The Javascript