In this example, we will build a Calendar that can accept selections on any date from 1/1/2006 to 12/31/2008, 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. Note that this example requires the dependencies outlined in the Quickstart Tutorial. First, we will construct the Calendar with the minimum and maximum dates specified:
Next, we will place our markup, which includes a standard container for the Calendar, and the form with a text field and button:
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:
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. Note that 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.
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.