Datepicker avec boucle

Version imprimable

Bonjour
Je suis un peu novice en js. J'ai récupéré un code sur internet sur le datepicker qui permet de saisir la date et l'heure dans un input.

Je vais essayer d'être explicite :

J'ai créé un outil de collecte de données en php.
Je demande à l'utilisateur de saisir un nombre d'interventions réalisées. Ce nombre (nbint) fera l'objet de (nbint) collectes.

Je fais donc une boucle for et (nbint) input à saisir.

Le datepicker fonctionne bien sur le premier input mais pas sur les suivants.

Copie code js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
				$(function() {
						$('#date1').datepicker({
						duration: '',
						showTime: true,
						constrainInput: false
												});
						$('#date2').datepicker({
						duration: '',
						showTime: true,
						constrainInput: false
												});
						$('#date3').datepicker({
						duration: '',
						showTime: true,
						constrainInput: false
												});
						$('#date4').datepicker({
						duration: '',
						showTime: true,
						constrainInput: false
												});
 
								});
				</script>

copie code php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<form method="post" action="#ancre"/>
		<label>Type Journ&eacute;e du <?php echo $newdate;?> : </label><?php echo $typejour." - ".$libjour." - ".$ferie;?>
		<?php
        
                for($i=0;$i<$nbint;$i++)
                { 
                
                ?>
 
 
			<table class="tableauAst" border="1" >
			<tr >
				<td class="recap" rowspan="2">Astreinte </br> N° <?php echo $i+1;?></td>
				<td class="recap">Heure D&eacute;but</td>
				<td ><input type="text" name="date3[<?php echo $i;?>]" id="date3" value="<?php echo $_POST['date3'][$i];?>"/></td>
				<td class="recap" rowspan="2" >Ordre</td>
				<td ><select name="oiast">
					<option>choisissez</option> <?php
                                        for($j=0;$j<count($taboi15);$j++)
                                                        {
                                                        ?><option value="<?php echo $taboi15[$j];?>"<?php if ($taboi15[$j]==$_POST['oiast'])
                                                                                                                                                                                  {echo "selected='selected'",$OIast=$taboi15[$j];}?>>
																						  <?php echo $taboi15[$j];?></option><?php
                                                        }                                                                                                                         
                                                        ?>
				</select>
			</td>
		</tr>
		<tr>
			<td class="recap">Heure Fin</td>
			<td ><input type="text" name="date4[<?php echo $i;?>]" id="date4" value="<?php echo $_POST['date4'][$i];?>"/></td>
		</tr>
		</table>
 
 
	<?php 
        } ?>	
		</form>

13/07/2012, 10h49
NoSmoking

Bonjour,
observes le code HTML généré, cela peut être utile, et à nous aussi ;).
13/07/2012, 15h26
naroco

qu'entends-tu par observer le code HTMl généré ?
13/07/2012, 19h50
NoSmoking

Citation:

qu'entends-tu par observer le code HTMl généré ?

le code qui permet à ton navigateur de t'afficher tes pages, avec un CTR + U, tu as accès à la source de la page, et observes si d'aventure tu n'aurait pas plusieurs éléments possédant la même ID.

je ne vois rien qui "cloche" dans le code source.
Je me demande si le souci ne vient pas du code js.
car j'indique que date3 et date4 sont des array (du fait de la boucle for)
Le code php

Code:

<td ><input type="text" name="date3[<?php echo $i;?>]" class="datepicker" id="date3" value="<?php echo $_POST['date3'][$i];?>"/></td>

Code:

<td ><input type="text" name="date4[<?php echo $i;?>]" class="datepicker" id="date4" value="<?php echo $_POST['date4'][$i];?>"/></td>

Le code JS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $('#date4').datepicker({ duration: '', showTime: true, constrainInput: false }); $( '#date3').each(function() { $(this).datepicker({ duration: '', showTime: true, constrainInput: false }); });

J'ai trouvé d'où venait mon problème.
J'ai récupéré un code qui utilisait la méthode class.
Par contre, j'ai un nouveau souci, j'ai perdu le time (saisie de l'heure). Je n'ai plus que le calendrier date qui s'affiche.
Quelqu'un a t-il une idée ?

Code js la partie en bleu doit permettre l'affichage de l'heure :

Code:

1
2
3
4
5
6
7
8
<script> 
jQuery(document).ready(function(){							jQuery(function() {						 jQuery('input').filter('.datepicker').datepicker({
		duration: '',
		showTime: true,
		constrainInput: false });                        
				});     
												}); 
			</script>

code php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
for($i=0;$i<$nbint;$i++)
		{ 
		
		?>
		
		
		<table class="tableauAst" border="1" >
		<tr>
		<td class="recap" rowspan="2">Astreinte </br> N° <?php echo $i+1;?></td>
		<td class="recap">Heure D&eacute;but</td>
    <td ><input type="text" class="datepicker" id="date3[<?php echo $i;?>]" /></td>
		<td class="recap" rowspan="2" >Ordre</td>
		<td ><select name="oiast">
			<option>choisissez</option> <?php
			for($j=0;$j<count($taboi15);$j++)
							{
			?><option value="<?php echo $taboi15[$j];?>"<?php if ($taboi15[$j]==$_POST['oiast'])
																						  {echo "selected='selected'",$OIast=$taboi15[$j];}?>>
																			  <?php echo $taboi15[$j];?></option><?php
							}															  
							?>
				</select></td>
	</tr>
	<tr>
<td class="recap">Heure Fin</td>
			<td ><input type="text" class="datepicker" id="date4[<?php echo $i;?>]" /></td>
		</tr>
		</table>
		
		
	<?php 
	} ?>

pb résolu

code php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table class="tableauAst" border="1" >
		<tr>
				<td class="recap" rowspan="2">Astreinte </br> N° <?php echo $i+1;?></td>
				<td class="recap">Heure D&eacute;but</td>
 
				<td ><input name="date3[<?php echo $i;?>]" type="text" class="datepicker" value="<?php echo $_POST['date3'][$i]; if(isset($_POST['date3'][$i])){$TabAstDeb[$i]=$_POST['date3'][$i];}?>" /></td>
 
 
		</tr>
		<tr>
			<td class="recap">Heure Fin</td>
			<td ><input name="date4[<?php echo $i;?>]" type="text" class="datepicker" value="<?php echo $_POST['date4'][$i];if(isset($_POST['date4'][$i])){$TabAstFin[$i]=$_POST['date4'][$i];}?>" /></td>
		</tr>
		</table>

code JS

Code:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript"> 
			jQuery(document).ready(function(){ 
							jQuery(function(){ 
							jQuery('input.datepicker').datepicker({	duration: '',
																	showTime: true,
																	constrainInput: false 
																	});                        
																			});     
																			}); 
			</script>