YUI: An Input Field Calendar Widget

I am working again on a project that uses the Yahoo User Interface Library (YUI). One of the requirements for the project is an input calendar field. When I first began the project, I created an event listener (Event.Listener) as discussed in a previous post.  But, because a date field is fairly common in web applications,  I wanted to create a widget so that I would not have to duplicate the process in future projects. To my surprise, YUI does not already have a widget with this functionality, so I decided to create one. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.

To use the widget, first load all of the required YUI files:

< link rel="stylesheet" type="text/css" href="lib/yui/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="lib/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="lib/intrig/imInputCal/imInputCal.js"></script>

The last file loaded is the widget itself (imInputCal). Setting up the HTML markupis quite simple:

<body class=" yui-skin-sam">
<div id="box" class="box">
   <div class="datefield">
      <label for="date" >Date: < /label>< input type="text" id="tAppDate" name="tAppDate" value="" />
   </div>
</div>
<div id="cntnerCal">
<div class="hd">Calendar</div>
    <div class="bd">
       <div id="appointCal"></div>
    </div>
</div>
</body>

The “tAppDate” is the input field used in the widget. The calendar is set up just as any YUI Calendar. The “cntnerCal” is the dialog container for the calendar and the “appointCal” is the container for the YUI Calendar widget.

Now we add some CSS styling:

.box {
     position:relative;
     height:200px;
     width:400px;
     background-color:#ff3300;
}
 
/* Datefield look/feel */
.datefield {
     position:relative;
     top:10px;
     left:10px;
     white-space:nowrap;
     border:1px solid black;
     background-color:#eee;
     width:25em;
     padding:5px;
}
 
.datefield input,
.datefield button,
.datefield label  {vertical-align:middle}
.datefield label  {font-weight:bold}
.datefield input  {width:15em}
.datefield button  {padding:0 5px 0 5px; margin-left:2px;}
.datefield button img {padding:0;margin:0;vertical-align:middle}
 
/* Clear calendar's float */
#cntnerCal .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
/* Have calendar squeeze upto bd bounding box */
#cntnerCal .bd {padding:0;}
 
/* Remove calendar's border and set padding in ems instead of px, so we can specify 
an width in ems for the container */
#appointCal {border:none;padding:1em}

To instantiate the imInputCal widget, we create an anonymous function. This function is added in the section of the web page:

?View Code JAVASCRIPT
(function(){		
     var Event = YAHOO.util.Event;
     Event.onDOMReady(function(){
          var imInputCal = new YAHOO.INTRIG.imInputCal({
               fields: 'tAppDate',
               container: 'cntnerCal',
               ctnrPosition: 'fixed',
               cal: 'appointCal', 
               calOptions: {selected: "04/07/2009", iframe: false},
               dateFormat: {order: "ymd", month: "numeric", year:"long", delimiter: "-"},
               buttons: true
          }); 	
     });
})();

imInputCal Widget Options

fields: The input fields Id (The date fields). When the user clicks on the field, the calendar will appear. For multiple fields, use the format:

?View Code JAVASCRIPT
["field1", "field2", "field3", etc]

container: The dialog box container.

ctnrPosition: The position of the dialog container (fixed or element). ‘element’ is the default.

cal: The container for the calendar.

calOptions: The calendar options (see the YUI Calendar configuration options). In the example above, the calendar’s selected date is ’04/07/2009′).

dateFormat: The date format that is displayed in the input field.

     order: The order of the month, year, and day. (mdy or ymd)
     month: The month format. short: Jan, Feb, Mar, etc. Numberic: "01", "02", "03", etc. 
                                               long: "January", "February", March", etc.
     year: The year format. long - 4 digit. short - 2 digit. 
     delimiter: The date delimeter ('/',  '-', etc).

The default dateFormat is:

?View Code JAVASCRIPT
{order: "mdy", month: "numeric", year:"long", delimiter: "/"}

Also, if the dateFormat.order is ‘mdy’ and the dateFormat.month is ‘long’, then the imInputCal widget will add a comma after the day value (November 13, 2009).

buttons:. If the ‘buttons’ option is set to true, then OK and Cancel buttons will appear on the dialog. The default is false.

I think that you will find that this widget is easy to use. Click to view a demo of the imInputCal widget. The widget can be downloaded from Google Code.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks