Forum Moderators: open

Message Too Old, No Replies

Javascript Calendar problem

         

tgate

9:39 am on Feb 1, 2007 (gmt 0)

10+ Year Member



I have downloaded javascript code which makes a nice little calendar on my webpage. However, I have run into a problem.

I have a text field with an image next to it (of a calendar) and I am trying to have the user click on the image which brings up the calendar, then put the date they select into the textbox next to it. So far, when I click the image, it refreshes the page which I do not want, and secondly, it puts nothing into the textbox.

The walkthrough of the calendar tells me to add a piece of code to the 'id' tag of the form element called "popup_container" which relates to the piece of script code that was given with the code

Im a complete newbie when it comes to javascript so any help in a simple(ish) format would be greatly appreciated.

Fotiman

3:39 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



First, welcome!
Second, can you post the actual code?

tgate

3:46 pm on Feb 1, 2007 (gmt 0)

10+ Year Member



here is the code i have:

in the head section:

<link rel="stylesheet" type="text/css" href="/_js/epoch_styles.css" />
<script type="text/javascript" src="/_js/epoch_classes.js"></script>
<script type="text/javascript">

/*You can also place this code in a separate file and link to it like epoch_classes.js*/
var bas_cal,dp_cal,ms_cal;
window.onload = function () {
bas_cal = new Epoch('epoch_basic','flat',document.getElementById('basic_container'));
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container'));
ms_cal = new Epoch('epoch_multi','flat',document.getElementById('multi_container'),true);
};

</script>

In the body section:

<input name="co_birth_date" id="popup_container" type="text" value="[Var('co_birth_date')]" size="10" maxlength="10" />

Using the code as it is in the body section, it will popup with the calendar when I click on the textbox. However, I had to change the id tag from what it was before which has messed up other things on the site i.e inserting to the database.

Therefore I couldnt find another way of doing it so tried the method I explained in my original post. Hope this helps.

Fotiman

6:23 pm on Feb 1, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




window.onload = function () {
bas_cal = new Epoch('epoch_basic','flat',document.getElementById('basic_container'));
dp_cal = new Epoch('epoch_popup','popup',document.getElementById('popup_container'));
ms_cal = new Epoch('epoch_multi','flat',document.getElementById('multi_container'),true);
};

It would appear as though the Epoch constructor takes an element reference as it's 3rd parameter. Presumably, this is the input field where the value will be populated to. Nothing unusual there.


<input name="co_birth_date" id="popup_container" type="text" value="[Var('co_birth_date')]" size="10" maxlength="10" />

Using the code as it is in the body section, it will popup with the calendar when I click on the textbox. However, I had to change the id tag from what it was before which has messed up other things on the site i.e inserting to the database.

Using the example you show above, you should be able to change the id in both places. For example:

dp_cal = new Epoch('epoch_popup','popup',document.getElementById('co_birth_date'));

<input name="co_birth_date" id="co_birth_date" type="text" value="[Var('co_birth_date')]" size="10" maxlength="10" />