Yahoo! Developer Network Home - Help

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.

  March 2025  
Su Mo Tu We Th Fr Sa
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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:

1YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", 
2                                                            { mindate:"1/1/2006", 
3                                                              maxdate:"12/31/2008" }); 
view plain | print | ?

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

1<div id="cal1Container"></div> 
2 
3<form name="dates"> 
4    <input type="text" name="date1" id="date1" /> 
5    <button type="button" id="update">< Update Calendar</button> 
6</form> 
view plain | print | ?

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:

1function handleSelect(type,args,obj) { 
2    var dates = args[0]; 
3    var date = dates[0]; 
4    var year = date[0], month = date[1], day = date[2]; 
5 
6    var txtDate1 = document.getElementById("date1"); 
7    txtDate1.value = month + "/" + day + "/" + year; 
8} 
9 
10YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true); 
view plain | print | ?

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).

1function updateCal() { 
2    var txtDate1 = document.getElementById("date1"); 
3 
4    if (txtDate1.value != "") { 
5        YAHOO.example.calendar.cal1.select(txtDate1.value); 
6        var selectedDates = YAHOO.example.calendar.cal1.getSelectedDates(); 
7        if (selectedDates.length > 0) { 
8            var firstDate = selectedDates[0]; 
9            YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear()); 
10            YAHOO.example.calendar.cal1.render(); 
11        } else { 
12            alert("Cannot select a date before 1/1/2006 or after 12/31/2008"); 
13        } 
14         
15    } 
16} 
view plain | print | ?

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:

Logger Console

INFO143ms (+0) 4:28:52 AM:
Config
Firing Config event: iframe=false
INFO143ms (+0) 4:28:52 AM:
Config
Firing Config event: close=false
INFO143ms (+1) 4:28:52 AM:
Config
Firing Config event: title=
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-4-5)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell41 (2025-4-5)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-4-4)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell40 (2025-4-4)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-4-3)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell39 (2025-4-3)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-4-2)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell38 (2025-4-2)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-4-1)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell37 (2025-4-1)
CELL142ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-31)
CELL142ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell36 (2025-3-31)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-30)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell35 (2025-3-30)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-29)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell34 (2025-3-29)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-28)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell33 (2025-3-28)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-27)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell32 (2025-3-27)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-26)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell31 (2025-3-26)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-25)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell30 (2025-3-25)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-24)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell29 (2025-3-24)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-23)
CELL141ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell28 (2025-3-23)
CELL141ms (+1) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-22)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell27 (2025-3-22)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-21)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell26 (2025-3-21)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-20)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell25 (2025-3-20)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-19)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell24 (2025-3-19)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-18)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell23 (2025-3-18)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-17)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell22 (2025-3-17)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[1] for (2025-3-16)
CELL140ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-16)
CELL140ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell21 (2025-3-16)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-15)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell20 (2025-3-15)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-14)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell19 (2025-3-14)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-13)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell18 (2025-3-13)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-12)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell17 (2025-3-12)
CELL139ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-11)
CELL139ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell16 (2025-3-11)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-10)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell15 (2025-3-10)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-9)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell14 (2025-3-9)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-8)
CELL138ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell13 (2025-3-8)
CELL138ms (+1) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-7)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell12 (2025-3-7)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-6)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell11 (2025-3-6)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-5)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell10 (2025-3-5)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-4)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell9 (2025-3-4)
CELL137ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-3)
CELL137ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell8 (2025-3-3)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-2)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell7 (2025-3-2)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-3-1)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell6 (2025-3-1)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-28)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell5 (2025-2-28)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-27)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell4 (2025-2-27)
CELL136ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-26)
CELL136ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell3 (2025-2-26)
CELL135ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-25)
CELL135ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell2 (2025-2-25)
CELL135ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-24)
CELL135ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell1 (2025-2-24)
CELL135ms (+0) 4:28:52 AM:
Calendar  cal1
renderer[0] for (2025-2-23)
CELL135ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering cell cal1_cell0 (2025-2-23)
REND134ms (+0) 4:28:52 AM:
Calendar  cal1
Calendar page starts on Sun Feb 23 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
REND134ms (+0) 4:28:52 AM:
Calendar  cal1
5 post-month days
REND134ms (+0) 4:28:52 AM:
Calendar  cal1
31 month days
REND134ms (+0) 4:28:52 AM:
Calendar  cal1
6 preciding out-of-month days
REND134ms (+0) 4:28:52 AM:
Calendar  cal1
Rendering body
REND134ms (+1) 4:28:52 AM:
Calendar  cal1
Rendering header
INFO133ms (+0) 4:28:52 AM:
Config
Firing Config event: maxdate=Wed Dec 31 2008 00:00:00 GMT+0000 (Coordinated Universal Time)
INFO133ms (+0) 4:28:52 AM:
Config
Firing Config event: mindate=Sun Jan 01 2006 00:00:00 GMT+0000 (Coordinated Universal Time)
INFO133ms (+0) 4:28:52 AM:
Config
Firing Config event: locale_weekdays=short
INFO133ms (+0) 4:28:52 AM:
Config
Firing Config event: locale_months=long
INFO133ms (+0) 4:28:52 AM:
Config
Config event queue: pagedate=Sun Mar 16 2025 04:28:52 GMT+0000 (Coordinated Universal Time), selected=, title=, close=false, iframe=false, multi_select=false, start_weekday=0, show_weekdays=true, show_week_header=false, show_week_footer=false, hide_blank_weeks=false, nav_arrow_left=null, nav_arrow_right=null, months_short=Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec, months_long=January,February,March,April,May,June,July,August,September,October,November,December, weekdays_1char=S,M,T,W,T,F,S, weekdays_short=Su,Mo,Tu,We,Th,Fr,Sa, weekdays_medium=Sun,Mon,Tue,Wed,Thu,Fri,Sat, weekdays_long=Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday, date_delimiter=,, date_field_delimiter=/, date_range_delimiter=-, my_month_position=1, my_year_position=2, md_month_position=1, md_day_position=2, mdy_month_position=1, mdy_day_position=2, mdy_year_position=3, my_label_month_position=1, my_label_year_position=2, my_label_month_suffix= , my_label_year_suffix=, navigator=null, locale_months=long, locale_weekdays=short, mindate=Sun Jan 01 2006 00:00:00 GMT+0000 (Coordinated Universal Time), maxdate=Wed Dec 31 2008 00:00:00 GMT+0000 (Coordinated Universal Time), 
INFO133ms (+133) 4:28:52 AM:
Config
queueProperty: maxdate=Wed Dec 31 2008 00:00:00 GMT+0000 (Coordinated Universal Time)
INFO0ms (+0) 4:28:52 AM:
global
Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Calendar Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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