YUI Library Examples: Button Control: Calendar Split 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 "option" event that will be used to render its Overlay as well as to create a new Calendar instance. (Defering the rendering of the Overlay until the firing of the "option" event improves the intial load time of the Button instance.)

function onButtonOption() {

/*
         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 Button instance's label when the user
        selects a date.
    */

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

var aDate;

if (p_aArgs) {
            
            aDate = p_aArgs[0][0];
                
            oButton.set("label", (aDate[1] + "/" + aDate[2] + "/" + aDate[0]));

}
        
        oCalendarMenu.hide();
    
    });

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

this.unsubscribe("option", onButtonOption);

}

/*
    Add a listener for the "option" event.  This listener will be
    used to defer the creation the Calendar instance until the 
    first time the Button's Overlay instance is requested to be displayed
    by the user.
*/

oButton.on("option", onButtonOption);

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 Split Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: