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.