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.

  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