« Integer to int null pointer exception? | Main | Vertical Scenario-based Development »
Javascript Date Picker
By Jeremy | July 26, 2009
Well, I started trying to do a tutorial for one of these so long ago that I might as well just release the finished code. I am releasing it under the MIT license. The code can be found at http://jrsandberg.com/Calendar.txt
The calendar works as an iframe. Include the calendar with something like this:
<iframe src="Calendar.html" frameborder="0" width="100" height="100" name="calendar" id="calendar"/>
Once the iframe is included, you will also need to add a global variable called “cal”. Just to make the calendar behave nicely you might want to add a “cal.hideCal();” to the <body onclick> event. The calendar will automatically attach itself to the parent window and provide you with the functions you need through the “cal” variable.
In order to use the date picker, simply create an input that has the type of text and add the appropriate functions to it:
<input type="text" name="startDate" id="startDate" size="10" onclick="cal.popCal(this);" onkeypress="cal.keyPress(this,event);"/>
That should be it. The calendar should align itself with the text box and format the date and things according to the us standard. The calendar isn’t an end all or a be all but I think it covers the general functionality really well.
Admittedly, I would rather have the calendar work through a div and not an iframe. I also don’t like the fact that it uses a “hack” to attach itself to the parent window. One other word of caution, I don’t know how well it works in IE. I have only really used it on Ubuntu firefox 2.5+.
Anyway, if you add any features, find any bugs or use this calendar, I would appreciate any and all feedback you have, good or bad.
Topics: javascript, tutorials | No Comments »
Comments
You must be logged in to post a comment.