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);

}

/*
	Add a "click" event listener that will render the Overlay, and 
	instantiate the Calendar the first time the Button instance is 
	clicked.
*/

oButton.on("click", onButtonClick);

Lastly, style the Button with a calendar icon.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: Button Control: Calendar Menu Button

YUI Logger Output:

Button Control Examples:

More Button Control Resources: