Basic structure of my dhtml calendar date picker:
Functions like a standard date picker; click on an icon, calendar pops up, choose the date, date is filled in the input box, and the calendar is hidden.
The calendar is initialized by calling create_datepicker(idname, optionaltitle) from the body onLoad(). This then document.writes as many calendars as you want to create.
You can create a single calendar and use it in multiple places on the page, or you can use multiple calendars on the same page. The onClick on the icon passes the input object to place the date in.
datepicker.asp has an onClick event on the day of the month that calls a function to place a date back into an input box located on the page with the div.
layerexist() simply finds an element by id in the document passed and returns the reference to that element.
inputobject is a variable I created to store a reference back to the <input> element to place the results after the user clicks on the day in the calendar.
The inputobject is stored in the div element's node.
The complete expression for passing the value to the <input> element looks something like this:
parent.document.getElementById('date_picker_iframe').parentNode.inputobject.value=formvalue;
Explained:
Find the iframe element (not the iframe's document), find the parentNode (div) set the value property of the inputobject (reference to input element) to the value passed (some date value, 12/2/2003 for example.)
It works, but seems a bit like overkill, there must be an easier way to reference the parent element directly.
Any ideas?
Bontebok
Code:
<form ...><input type="text" name="date_input"></form>
<div id="date_picker">
<iframe id="date_picker_iframe" src="datepicker.asp" />
</div>Functions like a standard date picker; click on an icon, calendar pops up, choose the date, date is filled in the input box, and the calendar is hidden.
The calendar is initialized by calling create_datepicker(idname, optionaltitle) from the body onLoad(). This then document.writes as many calendars as you want to create.
You can create a single calendar and use it in multiple places on the page, or you can use multiple calendars on the same page. The onClick on the icon passes the input object to place the date in.
datepicker.asp has an onClick event on the day of the month that calls a function to place a date back into an input box located on the page with the div.
Code:
function return_value(formvalue) {
var datepicker;
if (datepicker=layerexist(parent.document, name)) {
datepicker.parentNode.inputobject.value=formvalue;
if (document.layers)
datepicker.parentNode.visibility = "hide";
else
datepicker.parentNode.style.visibility = "hidden";
}layerexist() simply finds an element by id in the document passed and returns the reference to that element.
inputobject is a variable I created to store a reference back to the <input> element to place the results after the user clicks on the day in the calendar.
The inputobject is stored in the div element's node.
The complete expression for passing the value to the <input> element looks something like this:
parent.document.getElementById('date_picker_iframe').parentNode.inputobject.value=formvalue;
Explained:
Find the iframe element (not the iframe's document), find the parentNode (div) set the value property of the inputobject (reference to input element) to the value passed (some date value, 12/2/2003 for example.)
It works, but seems a bit like overkill, there must be an easier way to reference the parent element directly.
Any ideas?
Bontebok
