YUI Library Examples: Button Control: Simple Calendar Menu Button

Begin by defining an anonymous function in order to keep all variables out of the global scope. Inside the anonymous function, define some shortcuts to utils that will be used frequently (Dom and Event).


1	(function () {
2
3	var Event = YAHOO.util.Event,
4	Dom = YAHOO.util.Dom;
5
6	}());
	view plain \| print \| ?

Inside the the anonymous function, use the onDOMReady method of the Event utility to instantiate an Overlay and a Button when the page's DOM is ready to be scripted.


1	Event.onDOMReady(function () {
2
3	var oCalendarMenu;
4
5	// Create an Overlay instance to house the Calendar instance
6
7	oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });
8
9
10	// Create a Button instance of type "menu"
11
12	var oButton = new YAHOO.widget.Button({
13	type: "menu",
14	id: "calendarpicker",
15	label: "Choose A Date",
16	menu: oCalendarMenu,
17	container: "datefields" });
18
19	});
	view plain \| print \| ?

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.


1	oButton.on("appendTo", function () {
2
3	// Create an empty body element for the Overlay instance in order
4	// to reserve space to render the Calendar instance into.
5
6	oCalendarMenu.setBody(" ");
7
8	oCalendarMenu.body.id = "calendarcontainer";
9
10	});
	view plain \| print \| ?

Add a listener for the Button's "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.)


1	var onButtonClick = function () {
2
3	// Create a Calendar instance and render it into the body
4	// element of the Overlay.
5
6	var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
7
8	oCalendar.render();
9
10
11	// Subscribe to the Calendar instance's "select" event to
12	// update the month, day, year form fields when the user
13	// selects a date.
14
15	oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
16
17	var aDate;
18
19	if (p_aArgs) {
20
21	aDate = p_aArgs[0][0];
22
23	Dom.get("month-field").value = aDate[1];
24	Dom.get("day-field").value = aDate[2];
25	Dom.get("year-field").value = aDate[0];
26
27	}
28
29	oCalendarMenu.hide();
30
31	});
32
33
34	// Pressing the Esc key will hide the Calendar Menu and send focus back to
35	// its parent Button
36
37	Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
38
39	if (Event.getCharCode(p_oEvent) === 27) {
40	oCalendarMenu.hide();
41	this.focus();
42	}
43
44	}, null, this);
45
46
47	var focusDay = function () {
48
49	var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
50	aElements = oCalendarTBody.getElementsByTagName("a"),
51	oAnchor;
52
53
54	if (aElements.length > 0) {
55
56	Dom.batch(aElements, function (element) {
57
58	if (Dom.hasClass(element.parentNode, "today")) {
59	oAnchor = element;
60	}
61
62	});
63
64
65	if (!oAnchor) {
66	oAnchor = aElements[0];
67	}
68
69
70	// Focus the anchor element using a timer since Calendar will try
71	// to set focus to its next button by default
72
73	YAHOO.lang.later(0, oAnchor, function () {
74	try {
75	oAnchor.focus();
76	}
77	catch(e) {}
78	});
79
80	}
81
82	};
83
84
85	// Set focus to either the current day, or first day of the month in
86	// the Calendar when it is made visible or the month changes
87
88	oCalendarMenu.subscribe("show", focusDay);
89	oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);
90
91
92	// Give the Calendar an initial focus
93
94	focusDay.call(oCalendar);
95
96
97	// Re-align the CalendarMenu to the Button to ensure that it is in the correct
98	// position when it is initial made visible
99
100	oCalendarMenu.align();
101
102
103	// Unsubscribe from the "click" event so that this code is
104	// only executed once
105
106	this.unsubscribe("click", onButtonClick);
107
108	};
109	/*
110	Add a "click" event listener that will render the Overlay, and
111	instantiate the Calendar the first time the Button instance is
112	clicked.
113	*/
114
115	oButton.on("click", onButtonClick);
	view plain \| print \| ?

var onButtonClick = function () {
	
	// 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 "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];
				
			Dom.get("month-field").value = aDate[1];
			Dom.get("day-field").value = aDate[2];
			Dom.get("year-field").value = aDate[0];

}
		
		oCalendarMenu.hide();
	
	});

// Pressing the Esc key will hide the Calendar Menu and send focus back to 
	// its parent Button

Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
	
		if (Event.getCharCode(p_oEvent) === 27) {
			oCalendarMenu.hide();
			this.focus();
		}
	
	}, null, this);
	
	
	var focusDay = function () {

var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
			aElements = oCalendarTBody.getElementsByTagName("a"),
			oAnchor;

if (aElements.length > 0) {
		
			Dom.batch(aElements, function (element) {
			
				if (Dom.hasClass(element.parentNode, "today")) {
					oAnchor = element;
				}
			
			});
			
			
			if (!oAnchor) {
				oAnchor = aElements[0];
			}

// Focus the anchor element using a timer since Calendar will try 
			// to set focus to its next button by default
			
			YAHOO.lang.later(0, oAnchor, function () {
				try {
					oAnchor.focus();
				}
				catch(e) {}
			});
		
		}
		
	};

// Set focus to either the current day, or first day of the month in 
	// the Calendar	when it is made visible or the month changes

oCalendarMenu.subscribe("show", focusDay);
	oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);

// Give the Calendar an initial focus
	
	focusDay.call(oCalendar);

// Re-align the CalendarMenu to the Button to ensure that it is in the correct
	// position when it is initial made visible
	
	oCalendarMenu.align();

// 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.


1	#calendarpicker button {
2
3	background: url(../button/assets/calendar_icon.gif) center center no-repeat;
4	text-align: left;
5	text-indent: -10em;
6	overflow: hidden;
7	margin-left: 10em; / For IE */
8	padding: 0 3em; / For IE */
9	white-space: nowrap;
10
11	}
	view plain \| print \| ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

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: Simple Calendar Menu Button

Configuration for This Example

YUI Logger Output:

Button Control Examples:

More Button Control Resources: