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

Public Functions

Events

The Display Format Options

Some of the Possibilities

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.

Files

Known Bugs and Limitations

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.
displayFormat	Determines 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

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.

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()); };

yyyy	Full Year (2005, 1995, etc)
yy	Two Digit Year (05, 95, etc)
mmmm	Full 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)
dddd	Full 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)

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, yyyy	My favorite ('Jan 9, 2005', 'Dec 27, 2005', etc
ddd (d) mmmm, yyyy	'Mon. (9) January, 2005', etc

DateSelector Class	date_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.

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