My JavaScript Date-Selector-Calendar
Not long ago I was writing a MySQL database User-Input webpage. It included a form with various inputs for dates. To
make the date entry easier I looked around the internet for a calendar style input device. Although I found
several, a couple were hard to implement and most were what I considered large, bulky, and ugly looking. So
I set out to write my own. At first I wrote it as a part of the webpage, although in separate and concise
sections. Then for the fun of it I decided to rewrite it as a completely javascript implemented object, and this
is what I ended up with . . .
Features
- A single 14KB javascript file.
- A single instance javascript object.
- A single html element (re-positions itself, rather than duplicates).
- Loads once with the your webpage, no waiting for internet download on each entry.
- Opens to the date of the input field.
- Three built-in color schemes (set by changing a single number in .js file).
- Compact size option (set by a true/false selector in the .js file.
- Tested on Firefox 3.6.12 and IE 7.0.5730.13
- Produces SQL/MySQL date format: YYYY-MM-DD
P.S. - I was recently on a company website filling out several employment forms which included
dates. Their version of a date selecting calendar not only opened in a separate browser pop-up
window, but reloaded itself from the internet server every time! For every date field that needed to be
filled in! Makes ya wanna slap the programmer doesn't it.
Built-In Color Schemes (Firefox rendering):
Compact version:
Implementation:
- Copy this file (dateSelectorCalendar.js) to your web-page javascript files folder. (Right click, and
click "Save Target As..." or "Save Link As..." .)
- Add the reference to the file in your web-page Header area.
<script type="text/javascript" src="subFolder/dateSelectorCalendar.js"></script>
- For each "date" field input on your form add a calendar icon image (your choice of image).
Add the onclick event to the icon image as shown. The "date8" part of the onclick text must
be changed (matched) to the ID of the input field. Example:
<input type="text" size="15" name="date8" id="date8" value="" ></input>
<img src="images/calendar.jpg" onclick="dateSelectorCalendarShow(this,'date8');" >