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


Try It Here!

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:


  1. Copy this file (dateSelectorCalendar.js) to your web-page javascript files folder. (Right click, and click "Save Target As..." or "Save Link As..." .)
  2. Add the reference to the file in your web-page Header area.
    <script type="text/javascript" src="subFolder/dateSelectorCalendar.js"></script>
  3. 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');" >