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/2010, 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/2010" });

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/2010"); } } }

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.

### 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 - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- 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)
- 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)

### More Calendar Control Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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