Problems with date picker and multiple inputs

[xox]

Hello,

 

I'm using date picker for my input boxes that needs date as input, everything works ok on an simple example like this

 

css+js

<style type="text/css">
@import "kolendar_stil.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="kolendar.js"></script>
<script type="text/javascript">
$(function() {
    $('#popupDatepicker').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

function showDate(date) {
    alert('The date chosen is ' + date);
}
</script>

 

input (ISSUE only first textbox get's calender)

<p>a <input type="text" id="popupDatepicker"></p>  
<p>b <input type="text" id="popupDatepicker"></p>  
<p>c <input type="text" id="popupDatepicker"></p>  

 

This was just an example, here is my code of what I'm trying

			<?php
			if($row['fieldtype'] == 'a')
			{
			$date++;
			?>
                <style type="text/css">
                @import "kolendar_stil.css";
                </style>
<script type="text/javascript">
$(function() {
    $('#date').datepick();
});
</script>

			<input class="textFieldXXL" type="text" name="textboxZamenjava[]" id="date<?php echo $date;?>" maxlength="50" value="" />
			<img class="eFormsHelp" src="help.jpg"  id="pomoc<?php echo $stej;?>" />
			<LABEL class="inputDescription" FOR="desc"><?php echo $row['description'];?></LABEL>
			<div class="eFormsError">
			<div id=divDate<?php echo $date;?>> </div>
			</div>

 

But JS date picker won't show up, what' could be the issue?

 

Here's the source of whole script, but I think there is no issue

http://pastebin.com/RfgtkUzs

[xox]

NoOne?

[dadamssg87]

<style type="text/css">
@import "kolendar_stil.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="kolendar.js"></script>
<script type="text/javascript">
$(function() {
    $('#popupDatepicker1').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

$(function() {
    $('#popupDatepicker2').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});
$(function() {
    $('#popupDatepicker3').datepick();
    $('#inlineDatepicker').datepick({onSelect: showDate});
});

function showDate(date) {
    alert('The date chosen is ' + date);
}
</script>

 

<p>a <input type="text" id="popupDatepicker1"></p>  
<p>b <input type="text" id="popupDatepicker2"></p>  
<p>c <input type="text" id="popupDatepicker3"></p>  

[dadamssg87]

and if that doesn work..this works form me

 

	    <script>
	$(function() {
		$( "#datepicker1" ).datepicker({ 
			autoSize: true,
			showOtherMonths: true,
			selectOtherMonths: true });

		$( "#datepicker2" ).datepicker({
			autoSize: true,
			showOtherMonths: true,
			selectOtherMonths: true  });
	});
</script>

 

<input id='datepicker1' type='text' value='05/21/2011'><br><br>
<input id='datepicker2' type='text' value='05/21/2011'>

[xox]

Well that's OK if you know how many input boxes you have, but I don't, that's the problem.

 

My script is creating input boxes on the fly, depending on values in database (mysql).

 

An example of my code for date input field

 

<?php
			if($row['fieldtype'] == 'd') //d as date
			{
			$date++;
			?>
			<input class="textFieldXXL" type="text" name="textboxRes[]"[b] id="datum<?php echo $date;?>"[/b] maxlength="50" value="" />
			<img class="eFormsHelp" src="date.jpg"  id="date<?php echo $count;?>" />
			<LABEL class="inputDescription" FOR="desc"><?php echo $row['description'];?></LABEL>
			<div class="eFormsError">
			<div id=divDatum<?php echo $date;?>> </div>
			</div>
			<?php
			}

 

I've bolded where the problem is...

[dadamssg87]

I was doing something exactly the same. Little different syntax but what you need to do is create all the jquery datepicker functions when you're cycling through your date inputs. Something like the following

 

<?php
			if($row['fieldtype'] == 'd') //d as date
			{
			$date++;
			?>
			<input class="textFieldXXL" type="text" name="textboxRes[]"[b] id="datum<?php echo $date;?>"[/b] maxlength="50" value="" />
			<img class="eFormsHelp" src="date.jpg"  id="date<?php echo $count;?>" />
			<LABEL class="inputDescription" FOR="desc"><?php echo $row['description'];?></LABEL>
			<div class="eFormsError">
			<div id=divDatum<?php echo $date;?>> </div>
			</div>
                                <script type="text/javascript">
                               $(function() {
                               $('#datum<?php echo $date;?>').datepick();
                               $('#inlineDatepicker').datepick({onSelect: showDate});
                               });
                               </script>
			<?php
			}

 

or you can leave it how you had it. And then put this in the head of your page

 

<html>
<head>
<script type="text/javascript">
<?php
			if($row['fieldtype'] == 'd') //d as date
			{
			$date++;
			?>
                               $(function() {
                               $('#datum<?php echo $date;?>').datepick();
                               $('#inlineDatepicker').datepick({onSelect: showDate});
                               });
<?php } ?>
</script>
</head>

 

you just need to make sure the datepicker functions for each input are displayed when the page loads.