Yahoo!’s YUI JavaScript library provides many useful functions and widgets for developers to use to enhance the functionality of pages and Web forms.
In an earlier article I explained how to add a YUI Calendar widget to a single text field on a Web form and provided sample code for this.
The purpose of this article is to expand on my earlier article and show how a YUI calendar widget can be used to add date-picking functionality to multiple text fields. Below I also provide the code for a working example, as shown in the image to the left.
Details
For this example we have an HTML form with three text fields. The desired functionality is for a YUI Calendar widget to appear whenever one of the text fields is clicked. This calendar should show today’s date if the text field is blank, or it should show the date contained in the text field if a date existed. Once the user has finished browsing through the dates in the Calendar widget and has clicked on a date, the correct text field needs to be populated with the selected date and the Calendar widget should fade away. Alternately if the user clicks somewhere on the form surrounding the previously selected text field, then the Calendar widget must disappear.
Steps
Step one is to use Yahoo!’s Dependency Configurator tool to generate the correct YUI CSS and .JS libraries necessary for your Web form. In this case the selection will be relatively simple since we only need to include the Calendar control widget.
In my case the generator created the following reference lines:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.9.0/build/calendar/assets/skins/sam/calendar.css"> <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&2.9.0/build/calendar/calendar- min.js"></script>
Then I set the body class attribute to: class=”yui-skin-sam”
Now comes the final step…
Setting the Default Behavior of the Calendar Widget to Work Generically with the Three Text Fields
In this example we add a generic YUI (function(){ and hook up the calendar functionality by add the line:
Event.addListener(window, 'load', init_calendar);
This calls our function init_calendar which is then responsible for instantiating the generic Calendar widget, setting the event listeners to our Calendar control, and then finally for pre-rendering the Calendar widget as in the code snippet below:
var init_calendar = function() {
calendarPrime = new YAHOO.widget.Calendar('calendarPrime','calDiv');
calendarPrime.selectEvent.subscribe(addDateText, calendarPrime, true);
calendarPrime.renderEvent.subscribe(setupListeners, calendarPrime, true);
Event.addListener(['Date1', 'Date2', 'Date3'], 'focus', showCal);
Event.addListener(['Date1', 'Date2', 'Date3'], 'blur', hideCal);
calendarPrime.render();
}
In our function we also maintain several member variables including one for YAHOO.util.Dom, one for YAHOO.util.Event, and also one to act as a container holding the currently selected field: cur_field.
The following supporting functions are then added:
- A function to handle setting up mouseOut and mouseOver listeners for our three text fields.
- A function to hide the Calendar.
- A function to show the Calendar below the active text field and set the date to today’s date if the text field has no date, or conversely if the field has a date, set the Calendar that date.
- A function to set the default date of the Calendar to today’s date.
The Code
Without further delay, here is the working code example. Try it out if you get a chance, it works quite nicely!
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.9.0/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js&2.9.0/build/calendar/calendar-
min.js"></script>
<script type="text/javascript">
(function() {
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var calendarPrime;
var over_cal = false;
var cur_field = '';
var init_calendar = function() {
calendarPrime = new YAHOO.widget.Calendar('calendarPrime','calDiv');
calendarPrime.selectEvent.subscribe(addDateText, calendarPrime, true);
calendarPrime.renderEvent.subscribe(setupListeners, calendarPrime, true);
Event.addListener(['Date1', 'Date2', 'Date3'], 'focus', showCal);
Event.addListener(['Date1', 'Date2', 'Date3'], 'blur', hideCal);
calendarPrime.render();
}
var setupListeners = function() {
Event.addListener('calDiv', 'mouseover', function() {
over_cal = true;
});
Event.addListener('calDiv', 'mouseout', function() {
over_cal = false;
});
}
var hideCal = function() {
if (!over_cal) {
Dom.setStyle('calDiv', 'display', 'none');
}
}
var showCal = function(ev) {
var targetFormField = Event.getTarget(ev);
cur_field = targetFormField;
var xyLocation = Dom.getXY(targetFormField),
fieldDateValue = Dom.get(targetFormField).value;
if (fieldDateValue) {
calendarPrime.cfg.setProperty('selected', fieldDateValue);
calendarPrime.cfg.setProperty('pagedate', new Date(fieldDateValue), true);
} else {
calendarPrime.cfg.setProperty('selected', '');
calendarPrime.cfg.setProperty('pagedate', new Date(), true);
}
calendarPrime.render();
Dom.setStyle('calDiv', 'display', 'block');
xyLocation[1] = xyLocation[1] + 23;
Dom.setXY('calDiv', xyLocation);
}
var addDateText = function() {
var calendarDate = this.getSelectedDates()[0];
calendarDate = (calendarDate.getMonth() + 1) + '/' + calendarDate.getDate() + '/' + calendarDate.getFullYear();
cur_field.value = calendarDate;
over_cal = false;
hideCal();
}
Event.addListener(window, 'load', init_calendar);
})();
</script>
</head>
<body class="yui-skin-sam">
<form>
Select Date 1:
<input type="text" id="Date1" />
<br />
Select Date 2:
<input type="text" id="Date2" />
<br />
Select Date 3:
<input type="text" id="Date3" />
<br />
<div id="calDiv" style="display:none;"></div>
</form>
</body>
</html>
Justin Cooney 
1 thought on “YUI Calendar with Multiple HTML Text Fields”