YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Calendar and Text Fields

# Calendar Control: Calendar and Text Fields

This example builds upon the Events example, by demonstrating how you can use the select event to set the state of a text box on the page.

It also demonstates how to limit the dates which can be selected using the mindate/maxdate properties and how the current page and selected date can be set on the Calendar after it is first rendered.

View example in new window.

## Setting up the Calendar

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.

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/2006", maxdate:"12/31/2008" });

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/2006 or after 12/31/2008"); } } }

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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar
- Localization - Germany
- Localization - Japan
- Calendar inside a Container
- Interval Selection Calendar
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility (beta))
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control (beta))

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

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