Gearoid Corcoran . com

Creating a pop-up calendar

A good piece of code to use in your website to make the page look more professional is the pop up calendar. A number of websites offer solutions but I use this one:

http://www.mattkruse.com/javascript/calendarpopup/index.html

You basically download the following files:

CalendarPopup.js
AnchorPosition.js
date.js
PopupWindow.js

And add the following to your code:

<script language=”JavaScript” src=”CalendarPopup.js”></script>
<script language=”JavaScript”><br /> var calstart = new CalendarPopup();<br /> var calend = new CalendarPopup();<br /> </script>

<form name=”example” action=”adjusttable.php” method=”get”>
<table align=”center” border=”1″>
<tr><td>Start Date</td><td>

<input name=”startdate” value=”yyyy-mm-dd” size=”25″ type=”text”>
<a href=”#” onclick=”calstart.select(document.forms['example'].startdate,’anchor1′,’yyyy-MM-dd’); return false;” name=”anchor1″ id=”anchor1″><img src=”b_calendar.png” /></a>
</td></tr>

<tr><td>End Date</td><td>

<input name=”enddate” value=”yyyy-mm-dd” size=”25″ type=”text”>
<a href=”#” onclick=”calend.select(document.forms['example'].enddate,’anchor2′,’yyyy-MM-dd’); return false;” name=”anchor2″ id=”anchor2″><img src=”images/b_calendar.png” /></a>
</td></tr>

</table></form>

Works a treat!

March 9th, 2007 Posted by Gary Corcoran | | one comment