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 "appendTo" event that will be used to render its Overlay instance into the same DOM element specified as the containing element for the Button.

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

function onButtonClick() {
	
	/*
		 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: