YUI Library Home

YUI Library Examples: Button Control: Calendar Menu Button with Date on Button Face

Button Control: Calendar Menu Button with Date on Button Face

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.

Personal Information

Begin by defining an anonymous function in order to keep all variables out of the global scope. Inside the anonymous function, define some shortcuts to utils that will be used frequently (Dom and Event).

Inside the the anonymous function, use the onContentReady method of the Event utility to instantiate an Overlay and a Button when the "datefields" <fieldset> is available to be scripted. Additionally, create references to each of the form fields used to set the date. Each of the three date form fields are hidden and the Calendar will be used as a proxy for them.

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.

Add a listener for the Button's "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.)

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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