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. Selecting a date from the Calendar updates the label of the Button to reflect the currently selected date.

View example in new window.

Personal Information
First Name:
Last Name:
Birthday:

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

// Create a 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: oDateFields });

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

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: 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 Menu Button
- Color Picker Button
- Fixed Width Menu Button
- Glowing Button
- Slider Button
- Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control (beta))
- Getting CSS Style Sheets (included with examples for Get Utility)
- Complex Application (included with examples for Layout Manager (beta))

### More Button Control Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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