Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: Button Control: Calendar Menu Button

# Button Control: Calendar Menu Button

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

View example in new window.

Date Month: Day: Year:

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

// Create an Overlay instance to house the Calendar instance var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu"); // Create a Button instance of type "menu" var oButton = new YAHOO.widget.Button({ type: "menu", id: "calendarpicker", label: "Choose A Date", menu: oCalendarMenu, container: "datefields" });

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

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 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]; YAHOO.util.Dom.get("month-field").value = aDate[1]; YAHOO.util.Dom.get("day-field").value = aDate[2]; YAHOO.util.Dom.get("year-field").value = aDate[0]; } oCalendarMenu.hide(); }); /* Unsubscribe from the "click" event so that this code is only executed once */ this.unsubscribe("click", onButtonClick); } oButton.on("click", onButtonClick);

Lastly, style the Button with a calendar icon.

#calendarpicker button { background: url(../button/assets/calendar_icon.gif) center center no-repeat; text-align: left; text-indent: -10em; overflow: hidden; *margin-left: 10em; /* For IE */ *padding: 0 3em; /* For IE */ white-space: nowrap; }

### YUI Logger Output:

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

Reload with logging
and debugging disabled.

### Button Control Examples:

- Push Buttons
- Link Buttons
- Checkbox Buttons
- Radio Buttons
- Submit Buttons
- Reset Buttons
- Menu Buttons
- Split Buttons
- Calendar Menu Button
- Calendar Split Button
- Color Picker Button
- Fixed Width Menu Button
- Glowing Button
- Slider Button
- Getting CSS Style Sheets (included with examples for Get Utility)

### More Button Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2007 Yahoo! Inc. All rights reserved.

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