Cross-Browser DHTML Date Picker

Ever get jealous of those neat date widgets in Microsoft Access forms? Drool no more! This cross-browser date picker pops up when you click the calendar icon. It dynamically generates a grid for the requested calendar month every time you change month or year. It uses the dynamically modifiable .innerHTML property of divs on IE and NS6 to reset the element's contents to the new grid.

On Netcape 4, it uses the .document property of layers, which can be open()'ed and written to with write() or writeln(), then close()'d. As in the original example, the activating image serves double duty as the positioner image, but this does not have to be the case. Notice that in this example we set the div to appear at the same offset as the image rather than directly below it.

start:
stop:

view calendar.html source
view calendar.js source
view tjmlib.js source

Caveats
For some reason, resizing the browser window in netscape 4 breaks a ton of stuff (hit reload to get things going again). I guess I should add that reload-the-page-on-resize workaround (for now, manually reload the page if you resize on netscape). Also, take care not to have the calendar appear over a form input. On some versions of the browsers, form inputs are always painted last (ie over the calendar, obscuring big chunks of usefulness). You could always stuff the offending form input into a div and dynamically hide and show it, but it's usually easier to design your page so the calendar never falls over a form input.