Datepicker avec boucle

**naroco** · 13/07/2012, 10h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 13/07/2012, 11h49

Bonjour,
observes le code HTML généré, cela peut être utile, et à nous aussi

.

**naroco** · 13/07/2012, 16h26

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

**NoSmoking** · 13/07/2012, 20h50

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.

**naroco** · 16/07/2012, 10h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Le code JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
												});
						});

**naroco** · 16/07/2012, 12h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 
	} ?>

**naroco** · 17/07/2012, 12h16

code php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Datepicker avec boucle [UI]

jQuery

Discussions similaires

Partager

Partager