This example demonstrates how to create a Menu Button whose Menu displays a Calendar. Selecting a date from the Calendar updates the label of the Button to reflect the currently selected date.
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", { visible: false }); |
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: "datefields" }); |
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 | /* |
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 | }); |
view plain | print | ? |
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.)
1 | function onButtonClick() { |
2 | |
3 | /* |
4 | Create a Calendar instance and render it into the body |
5 | element of the Overlay. |
6 | */ |
7 | |
8 | var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id); |
9 | |
10 | oCalendar.render(); |
11 | |
12 | |
13 | |
14 | /* |
15 | Subscribe to the Calendar instance's "changePage" event to |
16 | keep the Overlay visible when either the previous or next page |
17 | controls are clicked. |
18 | */ |
19 | |
20 | oCalendar.changePageEvent.subscribe(function () { |
21 | |
22 | window.setTimeout(function () { |
23 | |
24 | oCalendarMenu.show(); |
25 | |
26 | }, 0); |
27 | |
28 | }); |
29 | |
30 | |
31 | /* |
32 | Subscribe to the Calendar instance's "select" event to |
33 | update the Button instance's label when the user |
34 | selects a date. |
35 | */ |
36 | |
37 | oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) { |
38 | |
39 | var aDate, |
40 | nMonth, |
41 | nDay, |
42 | nYear; |
43 | |
44 | if (p_aArgs) { |
45 | |
46 | aDate = p_aArgs[0][0]; |
47 | |
48 | nMonth = aDate[1]; |
49 | nDay = aDate[2]; |
50 | nYear = aDate[0]; |
51 | |
52 | oButton.set("label", (nMonth + "/" + nDay + "/" + nYear)); |
53 | |
54 | |
55 | // Sync the Calendar instance's selected date with the date form fields |
56 | |
57 | YAHOO.util.Dom.get("month").selectedIndex = (nMonth - 1); |
58 | YAHOO.util.Dom.get("day").selectedIndex = (nDay - 1); |
59 | YAHOO.util.Dom.get("year").value = nYear; |
60 | |
61 | } |
62 | |
63 | oCalendarMenu.hide(); |
64 | |
65 | }); |
66 | |
67 | |
68 | /* |
69 | Unsubscribe from the "click" event so that this code is |
70 | only executed once |
71 | */ |
72 | |
73 | this.unsubscribe("click", onButtonClick); |
74 | |
75 | } |
76 | |
77 | |
78 | /* |
79 | Add a listener for the "click" event. This listener will be |
80 | used to defer the creation the Calendar instance until the |
81 | first time the Button's Overlay instance is requested to be displayed |
82 | by the user. |
83 | */ |
84 | |
85 | oButton.on("click", onButtonClick); |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings