I've also heavily modified Lea Smart's calendar popup so that it doesn't use document.write and adds the calendar container to the body element instead of the head element. While I was at it I cleaned up the html code that is used for the calendar.
Here's the combined sample.
If you want to change the output format of the date parser, change the global dp_dateFormat variable to:
- dd mmm yyyy
- d mmm yyyy
- dd mm yyyy
- d mm yyyy
- mm dd yyyy
- m dd yyyy
- m d yyyy
The default format is m/d/yyyy. The code has been modified to allow date entry in dmy format for formatting strings that start with a "d". You can find the source files at:
- caldown.gif - left arrow image for calendar popup
- calendar.gif - calendar button
- calpopup.htm - example page for calendar popup
- calup.gif - right arrow image for calendar popup
- date-parser.htm - example page with combined input field date parser and calendar popup
- events.js - addEvent() that supports DOMContentLoaded that adds the date parsing behavior to the date input field.
For now you'll have to look at the example pages for the syntax.
Update: fixed a few bugs.
- Added click event to calendar container that stops the click event from bubbling.
- Added logic to close the month and year menus.
- Changed logic that calculates to see if the calendar will drop below the bottom of the screen.
- Changed page onclick handler to not calculate if the user clicked the mouse on the calendar. It now closes the calendar only since the calendar traps mouse click events and stops the click event at the calendar.
- Removed preload images since images are called from the CSS.
- Added setDateFormat() method.
- Syncronized calendar date format with date parser date format.
Update: 31 Mar 2006 - Fixed problem with date input if the month you were entering the had more days then the month you entered. The resulting date would be one month after the date you input. If you entered 1 Feb 2006 you would get 1 Mar 2006. It is now fixed, many thanks to ML for finding the problem.
Update: 22 Jul 2006
- Added holiday and day of week blockout masking. See source of date-parser.htm for an example of how to use holiday and day masking.
- Added an addEvent() call to add date parsing behavior to an input field with a class of "dateparse"
- Added the ability to set the start date of the drop down year menu.
Update: 31 Aug 2006
- Changed getFirstDOM function to set the day to 1 first then set the month and finally the year. This fixed a problem with the current day moving the month up to the next month and return the wrong first day of the month.
Update: 10 Sep 2006
- Changed table footer of calendar popup to display "Today is: Month Day, Year" or "Today is: Day Month Year" depending on the date format, with the date as a link.
- Changed title text of footer link from "Go to today's date" to "Go to current month".
- Modified calpopup.css to set the width of the footer td so that IE would not word wrap the text.