Setting up the Calendar

In this example, we will build a Calendar that can accept selections on any date from 1/1/2009 to 12/31/2013, and we will set up a text field that will be updated whenever the Calendar's selected date is changed. In addition, we will provide a button that can be used to update the Calendar with whatever date the user types into a text field provided on the page.

First, we will construct the Calendar with the minimum and maximum dates specified:

YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", { mindate:"1/1/2009", maxdate:"12/31/2013" });

Next, we will place our markup, which includes a standard container for the Calendar, and the form with a text field and button:

<div id="cal1Container"></div> <form name="dates"> <input type="text" name="date1" id="date1" /> <button type="button" id="update">< Update Calendar</button> </form>

Now, we must define a handler that will fire when the user changes the selected date on the Calendar. This function will be named handleSelect, and will be subscribed to the Calendar's selectEvent:

function handleSelect(type,args,obj) { var dates = args[0]; var date = dates[0]; var year = date[0], month = date[1], day = date[2]; var txtDate1 = document.getElementById("date1"); txtDate1.value = month + "/" + day + "/" + year; } YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);

The handleSelect function receives an array of selected dates as an argument. Since this Calendar is only single-select, we will only need to retrieve the first (and only) item in the array. The date argument is passed as an easily sorted Integer array in the format: [yyyy, mm, dd]. The handleSelect function takes these values and prints them into a text field which we will define in a later step. It's also necessary to subscribe the function to the selectEvent on the Calendar so that it will be fired when a selection is made.

Next, we will define a function called updateCal, which will be used to update the Calendar with the value that is typed into the text field. This function will be called via a button that will be created in our markup a little later.

Note that on line 7 we test whether or not any dates are actually selected after calling the select() method, since the date the user is trying to select may lie outside the min/max dates defined for the Calendar in which case the Calendar's selected date will not be changed (and a selectEvent will not be fired).

function updateCal() { var txtDate1 = document.getElementById("date1"); if (txtDate1.value != "") { YAHOO.example.calendar.cal1.select(txtDate1.value); var selectedDates = YAHOO.example.calendar.cal1.getSelectedDates(); if (selectedDates.length > 0) { var firstDate = selectedDates[0]; YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear()); YAHOO.example.calendar.cal1.render(); } else { alert("Cannot select a date before 1/1/2009 or after 12/31/2013"); } } }

The updateCal function does two key things. First, it grabs the value from the text field and uses it to make a new selection on the Calendar. Next, it changes the visible page of the Calendar to the Calendar's earliest selected date, so that the selection will be clear to the user.

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.