EPB Calendar

Last revision: August 5th, 2007

EPB Calendar Date Selector

The EPB Calendar Date Selector, true to its name, is a JavaScript object that creates a calendar so that your users may submit date information to web forms without needing to type in a date.

It works by dynamically creating the month in HTML in response to onclick and onchange events. Various aspects of it's functionality can be changed by modifying the objects' properties before writing or binding the control. When the active date is set, a hidden form field (given the name provided at instantiation time) contains the ISO-formatted date string which is passed on during form submission.

The calendar control will return the date in a ISO-8601 string. That is, when submitted this will send YYYY-MM-DD formatted dates. Such as 2006-12-25 for Christmas of 2006. If no CSS is set for the object, it will be pretty useless. So, it's not necessarily easy to use. The default names for various classes are listed in the documentation page. Here's an example of the calendar control. I've turned off the month and year quick selection drop downs. (Hid them with CSS)

Features:

Both Mouse and Keyboard Navigation
Easy initialization.
Ability to specify minimum year and maximum year for year quick select.
Almost everythings display properties can be modified with CSS.
Returns ISO-8601 Dates on form submission.
Cross-Browser: Has been tested in the following browsers: Firefox 2, Opera 8, IE6, and Safari 3 (For Windows)

If you have JavaScript enabled with support for basic DOM functionality, the input field below will be replaced by a calendar when you click this button:

This calendar uses the following CSS style rules:

     .epb_cal_table td {border: 1px solid #999;}

     .epb_active_day_class { background-color: #ff9; }

     .epb_mouse_over { background-color: red; }

     .epb_dayrow td {background-color: #ccf; border: 5px solid #ccf;}

     .epb_q_month_class, .epb_q_year_class  { display:none; }

     .epb_cal_head {font-size: 1.4em; text-align:center; background-color: #cff; 
font-weight: bold; font-variant: small-caps; letter-spacing: 3px;}

     .epb_cal_table {border: 1px solid black; }