In this article I will show a simple functioning example of using Yahoo!’s YUI API to bind a Calendar control with a single HTML text field as in the image to the left. I provide example code for this below.
Overview
The YUI API provides a very feature rich environment for extending the core functionality of JavaScript. Although currently JQuery exceeds YUI in popularity, YUI is constantly gaining traction among developers.
Details
For this example I have created a simple HTML page containing one text field. The intent is to display a YUI calendar control below the text field when the text field is clicked.
The first step in this process is to import the correct YUI libraries. To do this, simply select the Calendar control filter in Yahoo!’s Dependency Configurator tool, and the CSS style and .JS include reference will be generated for you.
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>
It’s as simple as that! Once this is complete you can set a styling for your page within the HTML Body tag, which I did using the following: class=”yui-skin-sam”
Some scripting is required to register your Calendar control with your page and text field, which is done in the JavaScript tag in your page header. In the example below this is done in the line:
YAHOO.util.Event.onDOMReady(init_calendar);
In this code, the init_calendar function is called when the Page DOM is ready for rendering.
Then add the init_calendar function and instantiate the Yahoo! Calendar widget and also remember to hook up the Yahoo! widget event listeners for the ‘focus’ and ‘blur’ events.
Finally within the init_calendar function make sure to register the selectEvent.subscribe method to tell your Calendar what to do once a date has been clicked on the Calendar. In this example the selectEvent.subscribe method is hard-coded to set the selected date to the correct text field element. However this can be dynamically handled if there is more than one Date-related text element on the page.
Example Code – How to Bind a YUI Calendar Control to an HTML Text Field
<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 init_calendar(){
var cal = new YAHOO.widget.Calendar("cal", { title:"Choose a date:", close:true } );
cal.render();
cal.hide();
YAHOO.util.Event.addListener("datefield", "focus", cal.show, cal, true);
YAHOO.util.Event.addListener("datefield", "blur", cal.show, cal, false);
cal.selectEvent.subscribe(addDateText, cal, true);
}
function addDateText(type, args, obj){
var datedata = args[0][0];
var year = datedata[0];
var month = datedata[1];
var day = datedata[2];
document.forms[0].datefield.value = month+'/'+day+'/'+year;
obj.hide();
}
YAHOO.util.Event.onDOMReady(init_calendar);
</script>
</head>
<body class="yui-skin-sam">
<form>
Date: <input type="text" id="datefield" />
<br />
<div id="cal"></div>
</form>
</body>
</html>
Justin Cooney 
2 thoughts on “YUI Calendar Control Bound to an HTML Text Field”