Calendar Example: Simple onSelect

Text Field:

This example illustrates use of the onSelect method in a simple 1-up instance of the Calendar control.

Our first step is to instantiate a 1-up Calendar as per the usual means; our Calendar instance will live in a div whose id is cal1Container:

this.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calExample.cal1","cal1Container"); 			
this.cal1.render ();

Next, we'll write a method that will handle the logic for the onSelect event. Here, we'll just assume that we want to grab the string value of the date from the date object; in practice, we'd often want to get month, day and year separately and reformat the date to suit our application (which we can do using the Date object's built-in functionality):

reportSelection = function() {
	document.forms.formOutput.textOutput.value = this.getSelectedDates().toString();	
}

Once we've done that, we can hook up our reportSelection handler to serve as the onSelect handler for cal1:

this.cal1.onSelect = this.reportSelection;			
this.cal1.render (); 

Using this approach, it takes just a single line of code to apply your own function to serve as the handler for this important moment in a Calendar control interaction.

— Eric Miraglia, Yahoo Presentation Platform Engineering