YUI Library Examples: Button Control: Calendar Menu Button

Begin by instantiating a Button of type "menu" and an Overlay instance that will house a Calendar instance.

Once the new Button is created, add a listener for its "click" event that will be used to render its Overlay instance as well as to create a new Calendar instance. (Defering the rendering of the Overlay until the firing of the "click" event improves the intial load time of the Button instance.)

function onButtonClick() {

/*
         Create an empty body element for the Overlay instance in order 
         to reserve space to render the Calendar instance into.
    */

oCalendarMenu.setBody(" ");

oCalendarMenu.body.id = "calendarcontainer";

// Render the Overlay instance into the Button's parent element

oCalendarMenu.render(this.get("container"));

// Align the Overlay to the Button instance

oCalendarMenu.align();
    
    
    /*
         Create a Calendar instance and render it into the body 
         element of the Overlay.
    */

var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);

oCalendar.render();

/* 
        Subscribe to the Calendar instance's "changePage" event to 
        keep the Overlay visible when either the previous or next page
        controls are clicked.
    */

oCalendar.changePageEvent.subscribe(function () {
        
        window.setTimeout(function () {

oCalendarMenu.show();
        
        }, 0);
    
    });

/*
        Subscribe to the Calendar instance's "select" event to 
        update the month, day, year form fields when the user
        selects a date.
    */

oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {

var aDate;

if (p_aArgs) {
                
            aDate = p_aArgs[0][0];
                
            YAHOO.util.Dom.get("month-field").value = aDate[1];
            YAHOO.util.Dom.get("day-field").value = aDate[2];
            YAHOO.util.Dom.get("year-field").value = aDate[0];

}
        
        oCalendarMenu.hide();
    
    });

/*
         Unsubscribe from the "click" event so that this code is 
         only executed once
    */

this.unsubscribe("click", onButtonClick);

}

oButton.on("click", onButtonClick);

Lastly, style the Button with a calendar icon.

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: Button Control: Calendar Menu Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: