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.


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

Once the new Button is created, add a listener for its "click" 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 "click" event improves the intial load time of the Button instance.)


1	function onButtonClick() {
2
3	/*
4	Create an empty body element for the Overlay instance in order
5	to reserve space to render the Calendar instance into.
6	*/
7
8	oCalendarMenu.setBody(" ");
9
10	oCalendarMenu.body.id = "calendarcontainer";
11
12
13	// Render the Overlay instance into the Button's parent element
14
15	oCalendarMenu.render(this.get("container"));
16
17
18	// Align the Overlay to the Button instance
19
20	oCalendarMenu.align();
21
22
23	/*
24	Create a Calendar instance and render it into the body
25	element of the Overlay.
26	*/
27
28	var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
29
30	oCalendar.render();
31
32
33
34	/*
35	Subscribe to the Calendar instance's "changePage" event to
36	keep the Overlay visible when either the previous or next page
37	controls are clicked.
38	*/
39
40	oCalendar.changePageEvent.subscribe(function () {
41
42	window.setTimeout(function () {
43
44	oCalendarMenu.show();
45
46	}, 0);
47
48	});
49
50
51	/*
52	Subscribe to the Calendar instance's "select" event to
53	update the Button instance's label when the user
54	selects a date.
55	*/
56
57	oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
58
59	var aDate,
60	nMonth,
61	nDay,
62	nYear;
63
64	if (p_aArgs) {
65
66	aDate = p_aArgs[0][0];
67
68	nMonth = aDate[1];
69	nDay = aDate[2];
70	nYear = aDate[0];
71
72	oButton.set("label", (nMonth + "/" + nDay + "/" + nYear));
73
74
75	// Sync the Calendar instance's selected date with the date form fields
76
77	YAHOO.util.Dom.get("month").selectedIndex = (nMonth - 1);
78	YAHOO.util.Dom.get("day").selectedIndex = (nDay - 1);
79	YAHOO.util.Dom.get("year").value = nYear;
80
81	}
82
83	oCalendarMenu.hide();
84
85	});
86
87
88	/*
89	Unsubscribe from the "click" event so that this code is
90	only executed once
91	*/
92
93	this.unsubscribe("click", onButtonClick);
94
95	}
96
97
98	/*
99	Add a listener for the "click" event. This listener will be
100	used to defer the creation the Calendar instance until the
101	first time the Button's Overlay instance is requested to be displayed
102	by the user.
103	*/
104
105	oButton.on("click", onButtonClick);
	view plain \| print \| ?

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

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

var aDate,
			nMonth,
			nDay,
			nYear;
	
		if (p_aArgs) {
			
			aDate = p_aArgs[0][0];
	
			nMonth = aDate[1];
			nDay = aDate[2];
			nYear = aDate[0];
	
			oButton.set("label", (nMonth + "/" + nDay + "/" + nYear));
	
	
			// Sync the Calendar instance's selected date with the date form fields
	
			YAHOO.util.Dom.get("month").selectedIndex = (nMonth - 1);
			YAHOO.util.Dom.get("day").selectedIndex = (nDay - 1);
			YAHOO.util.Dom.get("year").value = nYear;
	
		}
		
		oCalendarMenu.hide();
	
	});

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

this.unsubscribe("click", onButtonClick);

}

/*
	Add a listener for the "click" 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("click", onButtonClick);

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: