So far I've tested it using IE 5, IE 5.5, IE 6, IE 7 beta 2, Firefox 1.0, Firefox 1.5, Opera 8, Opera 9, and Safari. Let me know if there are any issues with other browsers.
To get started with DateChooser, download it here. The included readme.html file contains a few helpful examples. If you're in a hurry and looking for an idea of what it can do, I've posted the readme file.
- The HTML for the calendar is standards-compliant.
- The calendar appears in the same window as the input field(s). It doesn't annoyingly pop up in a new window.
- It has no hard-coded styles; apply your own .css file to customize DateChooser's appearance.
- Return values are flexible, using patterns borrowed from PHP's date() function.
- It doesn't pollute the global namespace.
Finally, and unlike some datepickers I've found, it's free (CC Attribution 2.0 License). Feel free to use it wherever, and for whatever purposes you like.
Version 2.11 (released Jun. 28, 2010)
- Replaced <th> with <td> to work around an IE6/7 bug
Version 2.10 (released Jun. 2, 2008)
- Fixed bug in inline calls
Version 2.9 (released Feb. 13, 2008)
- Fixed bug in setSelectedDate method (Thanks to Mark Olsen for the alert)
- Fixed bug in RefreshDisplay method (Thanks to Fabian Pena for the alert/fix)
Version 2.8 (released Jan. 31, 2008)
- Fixed bug in switching dates to shorter months (Thanks to Stephen Rocliffe for the alert/fix)
Version 2.7 (released Jan. 15, 2008)
- Fixed IE7-only bug in drawing the calendar
Version 2.6 (released Oct. 10, 2007)
- Fixed bug in private RefreshDisplay method introduced in 2.5
Version 2.5 (released Oct. 8, 2007)
- Fixed bug in private RefreshDisplay method (Thanks to David Lynch for the alert)
Version 2.4 (released May 2, 2007)
- Fixed bug in setSelectedDate method (Thanks to janine for the heads-up)
Version 2.3 (released Apr. 4, 2007)
- Fixed dc-dateformat bug using markup interface
Version 2.2 (released Apr. 3, 2007)
- Minor code optimizations
Version 2.0 (released Mar. 23, 2007)
- Added setSelectedDate() method
- Added updateFields() method
- Specify class="datechooser" on any input field, along with optional parameters
- see examples 5 and 6 on the example page
- Changed license to CC Attribution 2.0
Version 1.9.3 (released Mar. 9, 2007)
- Included better algorithm for determining DateChooser positioning (Thanks: Adam Seabridge)
- Fixed secure/insecure items warning in IE6 (SSL pages only)
Version 1.9.2 (released Dec. 19, 2006)
- Added td.invalidday class for all dates out of range
- Updated datechooser.css to show user allowed dates
Version 1.9.1 (released Dec. 6, 2006)
- Added setWeekStartDay() method (Defaults to 0 - Sunday)
Version 1.9 (released Oct. 24, 2006)
- Changed license to CC NoDerivs
Version 1.8 (released Oct. 2, 2006)
- Made several fixes for XHTML compatibility
Version 1.7 (released Sept. 12, 2006)
- Fixed onmousedown bug introduced in 1.6
- Added setEarliestDate(), setLatestDate(), and setAllowedDays() methods
- Added capability for setUpdateField() method to also accept an object as its only parameter
- displayPosition() no longer forces pixels as the unit. Unit should now be specified at call time
- Some minor code cleanup
Version 1.6 (released Sept. 11, 2006)
- Added iframe hacks to keep select boxes from "shining through" the calendar
Version 1.5 (released May 11, 2006)
- Initial public release
New: HTML Markup Interface
<input type="text" class="datechooser dc-dateformat='mdY'">
The other way is to use custom attributes, like so:
<input type="text" class="datechooser" dc-dateformat="mdY">
Use the first method if you are compulsive like me and you want your markup to validate. However, if publishing a page with invalid markup doesn't bother you, the second method avoids the obvious and shameless abuse of the class attribute.
Here is the list of options available to you using markup to instantiate a DateChooser:
|Attribute Name||Description||Example Value||Default Value|
|dc-dateformat||The PHP date-style format for your DateChooser output.||n-j-Y||n/a|
|dc-iconlink||The file name of the image to use as your clickable DateChooser icon.||datechooser.png||n/a|
|dc-textlink||The text to display within your DateChooser link.||DateChooser||n/a|
|dc-offset-x||The number of pixels to the left/right of the clicked icon/text that the DateChooser will show. Use negative numbers to move the DateChooser to the left.||10||0|
|dc-offset-y||The number of pixels above/below the clicked icon/text that the DateChooser will show. Use negative numbers to move the DateChooser higher.||-20||0|
|dc-closetime||The number of milliseconds to wait before closing the DateChooser when the mouse leaves it.||300||Will not close until the mouse is clicked|
|dc-onupdate||The name of the function to call after the DateChooser is updated. Do not include parentheses or parameters.||fnUpdate||n/a|
|dc-startdate||The date (mmddyyyy) to initialize the DateChooser when it is first opened.||04191978||Today's date|
|dc-earliestdate||The earliest possible date (mmddyyyy) that can be selected by the user.||05241979||n/a|
|dc-latestdate||The latest possible date (mmddyyyy) that can be selected by the user.||11231979||n/a|
|dc-alloweddays||A comma-separated list of days of the week (0-6) to allow the user to select. 0 is Sunday by default.||1,3,5 (only allows Mondays, Wednesdays and Fridays to be chosen)||All days are allowed by default|
|dc-weekstartday||The first day of each week. 0 is Sunday, 1 is Monday, etc.||2||0|
|dc-linkposition||Determines where to place the DateChooser icon/text link. If your DateChooser updates multiple fields, use this in only one of the fields to place the icon to the left or right of it.||left||right|
Please view the HTML markup in examples 5 and 6 in the example page for guidance.
Properties and Methods
- Date getSelectedDate()
- setSelectedDate(Date objDate)
- Sets the DateChooser's selected date. This method automatically calls updateFields() after the date is changed.
- Updates any attached form inputs with the selected date information.
- setLink(String sLinkText, String sPlacementID, Boolean bPlaceRight = true, String sTitleText = 'Click to choose a date')
- Places a link with text sLinkText and title sTitleText next to element with id sPlacementID. The date picker will open when this link is clicked. bPlaceRight determines whether the link is placed to the left or the right of the element. bPlaceRight and sTitleText are optional.
- setIcon(String sIconFile, String sPlacementID, Boolean bPlaceRight = true, String sTitleText = 'Click to choose a date')
- Places an icon with path sIconFile and title sTitleText next to element with id sPlacementID. The date picker will open when this icon is clicked. bPlaceRight determines whether the icon is placed to the left or the right of the element. bPlaceRight and sTitleText are optional.
- setXOffset(Number nOffset)
- Determines the number of pixels left or right of the mouse click that the date picker is displayed. This method will be ignored if date picker is shown using displayPosition.
- setYOffset(Number nOffset)
- Determines the number of pixels above or below the mouse click that the date picker is displayed. This method will be ignored if date picker is shown using displayPosition.
- setCloseTime(Number nTime)
- Determines the amount of time in milliseconds to hide the date picker after mouseout.
- setUpdateField(String sFieldID, String sFormattedPHPDate)
- Ties an input/select field with id sFieldID to the date picker. Sets the value of the field to sFormattedPHPDate, using the same format as PHP's date function.
- setUpdateField(Array aFieldIDs, Array aFormattedPHPDates)
- Ties a group of input/select fields with ids contained in aFieldIDs to the date picker. Sets values of the fields to expressions contained in aFormattedPHPDates, using the same format as PHP's date function.
- setUpdateField(Object objUpdateFields)
- Ties an input/select field to the date picker. Sets the value of the field using the same format as PHP's date function. The object member names are the Field IDs, and the member values are the date expressions.
- setUpdateFunction(Function fnFunction)
- Determines the function to call after a date has been selected by the user.
- setStartDate(Date objDateObject)
- Determines the initial date shown on the date picker.
- setEarliestDate(Date objDateObject)
- Determines the earliest date that can be selected by the user.
- setLatestDate(Date objDateObject)
- Determines the latest date that can be selected by the user.
- setAllowedDays(Array aAllowedDays)
- Determines which days of the week can be chosen. 0 is Sunday, 1 is Monday, etc.
- setWeekStartDay(Number nDay = 0)
- Determines which day of the week starts each calendar week. 0 is Sunday, 1 is Monday, etc.
- Shows the date picker. This function is designed to attach to an event only.
- displayPosition(String sXPosition, String sYPosition)
- Shows the date picker at the given position.