Yahoo! Developer Network Home - Help

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.

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", { visible: false }); 
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 "appendTo" event that will be used to render its Overlay instance into the same DOM element specified as the containing element for the Button.

1oButton.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    // Render the Overlay instance into the Button's parent element 
13 
14    oCalendarMenu.render(this.get("container")); 
15 
16}); 
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.)

1function 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        Subscribe to the Calendar instance's "changePage" event to 
15        keep the Overlay visible when either the previous or next page
16        controls are clicked.
17    */ 
18 
19    oCalendar.changePageEvent.subscribe(function () { 
20         
21        window.setTimeout(function () { 
22 
23            oCalendarMenu.show(); 
24         
25        }, 0); 
26     
27    }); 
28 
29 
30    /*
31        Subscribe to the Calendar instance's "select" event to 
32        update the month, day, year form fields when the user
33        selects a date.
34    */ 
35 
36    oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) { 
37 
38        var aDate; 
39 
40        if (p_aArgs) { 
41                 
42            aDate = p_aArgs[0][0]; 
43                 
44            YAHOO.util.Dom.get("month-field").value = aDate[1]; 
45            YAHOO.util.Dom.get("day-field").value = aDate[2]; 
46            YAHOO.util.Dom.get("year-field").value = aDate[0]; 
47 
48        } 
49         
50        oCalendarMenu.hide(); 
51     
52    }); 
53     
54 
55    /*
56         Unsubscribe from the "click" event so that this code is 
57         only executed once
58    */ 
59 
60    this.unsubscribe("click", onButtonClick); 
61 
62
63 
64/*
65    Add a "click" event listener that will render the Overlay, and 
66    instantiate the Calendar the first time the Button instance is 
67    clicked.
68*/ 
69 
70oButton.on("click", onButtonClick); 
view plain | print | ?

Lastly, style the Button with a calendar icon.

1#calendarpicker button { 
2 
3    backgroundurl(../button/assets/calendar_icon.gif) center center no-repeat
4    text-alignleft
5    text-indent-10em
6    overflowhidden
7    *margin-left10em/* For IE */ 
8    *padding0 3em;    /* For IE */ 
9    white-spacenowrap
10 
11} 
view plain | print | ?

Copyright © 2008 Yahoo! Inc. All rights reserved.

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