javascript calendar in PHP

[otixz]

Hello...

My problem is this.
I have four input boxes with a calendar icon.
My problem is the calendar icon only works for the first inbox.
When I click the other icons, I can't view the javascript calendar.

Here's the code:
<!--Calendar configuration-->
<style type="text/css">@import url("jscalendar-1.0/calendar-blue2.css");</style>
<script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript" src="javascript2/sugar.js"></script>
<script type="text/javascript" src="javascript2/security.js"></script>

<?php
for($a=0;$a<=3;$a++){
?>

<table width="75%" border="0" cellpadding="2" cellspacing="2">
	<tr>
		<td>
			<input  type="text" name="date_range[]" id="date_range[]" tabindex='1' size='11' maxlength='11'  value=""></input>
			 <img src="images/calendar.png" alt="Date"  id="txtDateFromTrigger[]" align="absmiddle">
				<script type="text/javascript">
					Calendar.setup (
						{
							inputField : "date_range[]", // ID of the input field
							ifFormat : "%Y-%m-%d", // the date format
							button : "txtDateFromTrigger[]" // ID of the button
						}
					);
				</script>

		</td>			
	</tr>				

</table>
<?}?>

I hope you could help me on this one.
Thanks!

Grace

[theelectricwiz]

It looks like your loop is not creating unique ids for the input fields which is why the calendar is only opens for the first text box. You need to create a unique id for the textbox ie id="date_range<?=$a?>" and inputField : "date_range<?=$a?>",

[otixz]

Thank you sir for your reply, however, i tried your example but it still doesn't work...
please have some time to look at my codes again...

<!--Calendar configuration-->
<style type="text/css">@import url("jscalendar-1.0/calendar-blue2.css");</style>
<script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>
<script type="text/javascript" src="javascript2/sugar.js"></script>
<script type="text/javascript" src="javascript2/security.js"></script>

<?php
for($a=0;$a<=3;$a++){

?>

<table width="75%" border="0" cellpadding="2" cellspacing="2">
<tr>
<td>
<input type="text" name="date_range<?=$a?>" id="date_range<?=$a?>" tabindex='1' size='11' maxlength='11' value=""></input>
<img src="images/calendar.png" alt="Date" id="txtDateFromTrigger[]" align="absmiddle">
<script type="text/javascript">
Calendar.setup (
{
inputField : "date_range<?=$a?>", // ID of the input field
ifFormat : "%Y-%m-%d", // the date format
button : "txtDateFromTrigger[]" // ID of the button
}

);
</script>

</td>
</tr>

</table>
<?} ?>

Thank you very much.
Grace

[theelectricwiz]

try doing the same thing for the id of the button as well. Note you should not have to change the name of text field/button, just the id.