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. |
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 |
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
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) |
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, yyyy | My 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
Known Bugs and Limitations
- Can't parse the following formats: dddd, ddd, mmmm, and mmm
- Limited error handling, it may not die gracefully if invalid date/format strings are given
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