YUI Library Examples: Button Control: Calendar Menu Button

Button Control: Calendar Menu Button

This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.

View example in new window.

Date

Begin by instantiating a Button of type "menu" and an Overlay instance that will house a Calendar instance.

1// Create an Overlay instance to house the Calendar instance 
2 
3var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu"); 
4 
5 
6// Create a Button instance of type "menu" 
7 
8var 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 "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.)

1function 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        Subscribe to the Calendar instance's "changePage" event to 
35        keep the Overlay visible when either the previous or next page
36        controls are clicked.
37    */ 
38 
39    oCalendar.changePageEvent.subscribe(function () { 
40         
41        window.setTimeout(function () { 
42 
43            oCalendarMenu.show(); 
44         
45        }, 0); 
46     
47    }); 
48 
49 
50    /*
51        Subscribe to the Calendar instance's "select" event to 
52        update the month, day, year form fields when the user
53        selects a date.
54    */ 
55 
56    oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) { 
57 
58        var aDate; 
59 
60        if (p_aArgs) { 
61                 
62            aDate = p_aArgs[0][0]; 
63                 
64            YAHOO.util.Dom.get("month-field").value = aDate[1]; 
65            YAHOO.util.Dom.get("day-field").value = aDate[2]; 
66            YAHOO.util.Dom.get("year-field").value = aDate[0]; 
67 
68        } 
69         
70        oCalendarMenu.hide(); 
71     
72    }); 
73     
74 
75    /*
76         Unsubscribe from the "click" event so that this code is 
77         only executed once
78    */ 
79 
80    this.unsubscribe("click", onButtonClick); 
81 
82} 
83 
84/*
85    Add a "click" event listener that will render the Overlay, and 
86    instantiate the Calendar the first time the Button instance is 
87    clicked.
88*/ 
89 
90oButton.on("click", onButtonClick); 
view plain | print | ?

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 | ?

YUI Logger Output:

Logger Console

INFO0ms (+0) 3:21:52 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Button Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings