DateSelector Class

This is an object-oriented javascript component that can display a date in a variety of different formats and provides a calender popup for changing/selecting a date.

Paramaters

DateSelector(date, displayFormat, id, editable)
date The initial selected date. Can be a string, a Date() object, a DateTime() object, or null. If it is a string, it must be in the same format as the displayFormat param. If null, it will be set to the current date.
displayFormatDetermines how the date will be displayed, see Display Format Options below
id If you want to style DateSelectors differently, you will want to give it an id. See css example below
editable Setting this to true will allow you to edit the date without using the date selector, but I haven't completed this feature yet so it should always be set to false

Public Functions

getDOM() Returns the div that contains the everything, the id of the div is the third param of the DateSelector
getDateTime() Returns the DateTime object that is set to the same date as the component, you can change the DateTime object to change the selected value of the DateSelector
toString(format)Returns the selected date as a string formatted by the format param, if given or by the display format given as the second paramater to the DateSelector. See Display Format Options.

Events

onChange()By default this function does nothing, but you can use it as an event handler that notifies you when a new date has been selected. Simple over-ride the function like this
myDateSelector.onChange = function() { /* handle the event here, the keyword this references myDateSelector, so you could say something like...*/ alert(this.toString()); };

The Display Format Options

yyyyFull Year (2005, 1995, etc)
yy Two Digit Year (05, 95, etc)
mmmmFull name of month (January, December, etc)
mmm Short name of month (Jan, Dec, etc)
mm Zero padded number of month, from 01 to 12 (01 = January, 12 = December, etc)
m Number of month from 1 to 12 (1 = January, 12 = December, etc)
ddddFull name of day of week (Monday, Sunday, etc)
ddd Short name of day of week (Mon, Sun, etc)
dd Zero padded number of day of month from 01 to 31 (01 = first day of month, etc)
d Number of day of month from 1 to 31 (1 = first day of month, etc)

Some of the Possibilities

yyyy-mm-dd Idea for MySQL ('2005-12-18', '2005-09-05', etc)
m-d-yy Normal U.S. date string ('7-18-83', '12-9-05', etc)
mmm d, yyyyMy favorite ('Jan 9, 2005', 'Dec 27, 2005', etc
ddd (d) mmmm, yyyy'Mon. (9) January, 2005', etc

Examples

Most of the javascript programming I do is with the DOM, so these components are idea for dynamic use, but if you've doing more traditional javascript the easiest thing to do is create an empty div for the DateSelector. In the onload handler of the body tag, call a function that creates the DateSelector and appends it to the div as I've done in the next two examples. The css is a little nastier than I wish it was, but it is fairly simple and if you id each DateSelector you can style them differently. Here is the css for a DateSelector that doesn't have an id. This is what it looks like, assuming it works...

// Put a div in your html somewhere like this <div id="dateNoID"></div> // The DateSelector is created like this sometime after the div is created var dateNoID = new DateSelector(null, 'mmm d, yyyy'); // and appended to this div in the onload attribute on the body tag document.getElementById('dateNoID_div').appendChild(dateNoID.getDOM()); // Here's the css, hopefully you can make it look better than I have... /* holds date_span or date_txt and the down link to show the calander */ .top_div { } /* holds the formatted date */ .date_span { border:1px solid #000; cursor:pointer; padding:0px 3px 0px 3px; background-color:#FFF; } /* if editable, the text field that holds the date */ .date_txt { } /* holds the month select, year select, left link, right link, close link, and the calander */ .select_div { position:absolute; border:1px solid #000; z-index:1; background-color:#FFF; } .month_s { width:100px; } .year_s { width:75px; } /* close, show, left, and right links that look something link buttons */ .button_a { background-color:#DDD; border:solid #FFF 1px; text-decoration:none; color:#000; padding:0px 3px 0px 3px; margin:0px 1px 0px 1px; } .button_a:hover { background-color:#FFF; } /* table that holds numbers for calander, each cell contains a link that can be clicked to change the selected date. */ .cal_table { border: 1px solid #000; width:235px; } .cal_table th { background-color:#EEE; border:none; } .cal_table td { border:none; text-align:center; padding:2px 5px 2px 5px; } .cal_table a { text-decoration:none; color:#000; } /* The currently selected cell and link*/ .cal_table .currentDay_td { background-color:#DDD; } .cal_table .currentDay_td a { }

Here's the code for a DateSelector that is styled by id and has a different display. Please forgive my attempt at Christmas colors.

var dateWithID = new DateSelector(new Date(), 'mmmm d, yy', 'christmas'); document.getElementById('dateWithID_div').appendChild(dateWithID.getDOM()); #christmas { } #christmas .top_div { } #christmas .date_span { border:1px solid #000; cursor:pointer; padding:0px 3px 0px 3px; background-color:#009900; color:#FFF; } #christmas .date_txt { } #christmas .select_div { position:absolute; border:1px solid #000; z-index:1; background-color:#FFF; } #christmas .month_s { width:100px; background-color:#009900; color:#FFF; } #christmas .year_s { width:75px; background-color:#009900; color:#FFF; } #christmas .button_a { background-color:#FF0000; border:solid #DDD 1px; text-decoration:none; color:#FFF; padding:0px 3px 0px 3px; margin:0px 1px 0px 1px; } #christmas .button_a:hover { background-color:#FFF; color:#FF0000; } /* table that holds numbers for calander */ #christmas .cal_table { border:1px solid #000; width:235px; } #christmas .cal_table th { background-color:#FF0000; border:none; color:#FFF; } #christmas .cal_table td { background-color:#009900; border:none; text-align:center; padding:2px 5px 2px 5px; } #christmas .cal_table a { text-decoration:none; color:#FFF; } #christmas td.currentDay_td { background-color:#FFF; } #christmas td.currentDay_td a { color:#009900; text-decoration:none; }

Files

DateSelector Classdate_selector.js
DateTime Class date_time.js
Example CSS date.css
DateSelector Demo date.html
DateTime Demo date.html
Compressed date_com.js. Combines date_selector.js and date_time.js. Compressed using my php script to about 55% the origional size.

Known Bugs and Limitations

I hope this component is useful. If you find any bugs or have any suggestions or questions, please email me at josephhermens@gmail.com. Thanks, Joseph Hermens