Une boucle sur des dates

Version imprimable

Bonjour à tous,

Je suis débutant en JS (j'ai commencé à apprendre avant-hier), et je bloque à un endroit...

Donc je récapitule mon idée :
Je sélectionne dans une liste déroulante une date de départ, qui est fait en PHP. L'utilisateur voir écrit "Mercredi XX/XX/XXXX" et je stocke la valeur de ce mercredi en timestamp.

Maintenant dans une autre liste déroulante, je stocke le nombre de semaine total.

Quand on clique sur 1 dans cette liste, on voit 1 tableau qui contient une semaine, et si on clique sur n on voit n tableau...
Ce tableau comporte les jours de la semaine, du Mercredi au Mardi.

Je voudrais faire en sorte que si la date de départ est le 19/08/2009, dans mes tableaux concernant les semaines cela affiche :

Mercredi 19/08 Mercredi 26/08
Jeudi 20/08 Jeudi 27/08
... .....
Mardi 25/08

Voici mon code pour ceux qui n'aiment pas la littérature ^^ :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php 
// Création des variables pour la liste déroulante de la date de début
$mercrediprochain = strtotime("next Wednesday")+43200; 
$mercredifin = $mercrediprochain+6048001;
$unjour=86400;
?>
<form action="test2.php" method="post">
<select name="jourdebut" onchange="obtenirdate(this)">
 
			<?php for ($c=$mercrediprochain; $c<$mercredifin; $c+=604800) { ?>
    		<option value="<?php echo date("d/m/Y", $c); ?>">Mercredi <?php echo date("d/m/Y", $c); ?></option>
    		<?php } ?>
</select><br />
<select name="horaire" onchange="listehoraire(this); derouler(this)">
<option value="0">Selectionnez une valeur</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id=div1 style="width:500px;"></div>
<script>
function obtenirdate(liste)
	{
		date2 = liste.options[liste.selectedIndex].value;
	}
function listehoraire(liste)
	{
		var valeur = liste.options[liste.selectedIndex].value;
		var resultat = "<table border='0' width='50%'>";
			// Tableau pour afficher les jours dans les différents tableaux d'horaire
		var jourdelasemaine = ["Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi", "Mardi"];
			// Boucle afficher a cellule
		for (a=0; a<valeur; a++)
			{
			// S'il y a un nombre paire de tableau, recommenrcer une ligne
				if (a%2==0) 
					resultat += "<tr><td>";
			// sinon, fermer juste la cellule 
				else
					resultat += "<td>";
			resultat += '<table style="margin-left:20px;" width="200" border="1" cellspacing="0" cellpadding="0"><tr>'
 
			// Boucle affichant les lignes d'un tableau d'une semaine
				for (b=0; b<7; b++)
					{
						resultat += '<td width="92">'+jourdelasemaine[b]+' '+date2+'</td><td width="102"><input name="semaine['+a+']['+b+']" type="text"/></td></tr>'
					}
				resultat += '</tr></table><br />'
 
				if (a%2==0) 
					resultat += "</td>";
				else
					resultat += "</td></tr>";
			}
		resultat += "</table>";
		document.getElementById("div1").innerHTML = resultat;
	}
 
function derouler(liste)
	{
		$("div1").show("slow");
	}
</script>
<input type="submit" value="Envoyer" />
</form>

Si quelqu'un pouvait me guider, ça serait cool :)

Merci d'avance ;)

21/08/2009, 01h46
GBS63

bonsoir,

1er post sur ce forum,,

bon... j'essaie d'aider, mais je ne suis pas sûr d'avoir tout compris ton soucis !

veux-tu modifier & mettre à jour dynamiquement/directement les options de ton select ' name="horaire" ' ? ou bien ? :)

(sur ce que j'ai compris, la clé de ton problème serait plutôt orientée vers les fonctions php mktime() & date(),,... tu peux aussi utiliser javascript pour arriver au même résult... mais si tu interroges php une 1ère fois pour peupler ton sélect, autant utiliser php pour finaliser ta page/ton select)

" Je voudrais faire en sorte que si la date de départ est le 19/08/2009, dans mes tableaux concernant les semaines cela affiche 'Mercredi 19/08 Mercredi 26/08' + 'Jeudi 20/08 Jeudi 27/08' " <<... si j'ai suivit :
1) tu choisis '19/08/2009' dans un select (date obtenue via php)
2) & ça affiche comme résultat un tableau, avec les valeurs 'Mercredi 19/08 Mercredi 26/08' + 'Jeudi 20/08 Jeudi 27/08' (+?) dans ta page
3) exact ?

je veux bien aider, mais ça manque un peu de précision... merci de mieux détailler,,

bon code,

J'avais fait ceci en 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
 
<?php 
// Création des variables pour la liste déroulante de la date de début
$mercrediprochain = strtotime("next Wednesday")+43200; 
$mercredifin = $mercrediprochain+6048001;
$unjour=86400;
?>
<tr>
    <td align="right">Date de début : <br /></td>
    <td>
	    <select name="jourdebut">
 
			<?php for ($c=$mercrediprochain; $c<$mercredifin; $c+=604800) { ?>
    		<option <?php if($jourdebut==date("Y-m-d", $c)){echo 'selected="selected" ';}?> value="<?php echo $c; ?>"><?php echo date("\M\e\\r\c\\r\e\d\i d/m/Y", $c); ?></option>
    		<?php } ?>
</select>
 
       </td>
  </tr>
    <tr>
    <td align="right">A l'affiche pendant : <br /></td>
    <td>
    	<select id="idsemaine" name="semaine">
   			<option value="0" selected="selected" ></option>
     		<?php for ($d=1; $d<7; $d++) {?>
    		<option <?php if($semaine==$d){echo 'selected="selected" ';}?> value="<?php echo $d; ?>"><?php echo $d; ?></option>
    		<?php } ?>
    	</select> semaine(s)</td>
  </tr>
  <tr>
  	<td colspan="2"><div style="display:none" id="tableausemaine" style="width:500px; height:500px;"><p>Coucou</p></div></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" name="envoyer" value="Envoyer" />&nbsp;<input type="reset" name="reset" value="Effacer tout" /></td>
  </tr>
</table>
 
</form>

et un peu plus bas dans le code :

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
40
41
42
43
44
45
46
<?php
// Boucle sur les tableaux des horaires
if (isset($_POST["semaine"])) { ?>
<br />
<br />
<h2 align="center">Horaire à remplir pour chaque semaine :</h2>
 
<form action="admin_envoi.php" method="post">
<table border="0" align="center">
<?php $ts = mktime(12,0,0, substr($jourdebut,5,2), substr($jourdebut,8,2), substr($jourdebut,0,4));
$semainedebut = mktime(12,0,0, substr($jourdebut,5,2), substr($jourdebut,8,2), substr($jourdebut,0,4));
$semainefin = mktime(12,0,0, substr($jourdebut,5,2), substr($jourdebut,8,2), substr($jourdebut,0,4));
echo $semainedebut;
echo $semainefin;
for ($e=1; $e<$semaine+1; $e++) { ?>
 
    <?php if ($e%2==1) { ?>  <tr> <?php } ?>
    <td height="230">	
    	<table width="320" border="1">
        	<tr>
            <td colspan="2" align="center">Semaine du <?php echo date("d/m/Y", $semainedebut); ?> au <?php echo date("d/m/Y", $semainefin+518400); ?></td>
            </tr>
			<?php for ($f=1; $f<8; $f++) { 
                                
                        ?>
 
					<tr>
    					<td><div align="right"><?php echo $jourdelasemaine[date("w",$ts)] . " " . date("d",$ts) . " " . $moisdelannee[date("n", $ts)] ?></div></td>
                        <td width="144"><input name="semaine[<?php echo $e ?>][<?php echo $f ?>]" type="text" value=""/></td>
					</tr>
 
			<?php 
                                $ts += 3600*24;
                                
                        } 
            $semainedebut += 604800;
                                $semainefin += 604800; ?>
        </table>
       </td>
     <?php if ($e%2==0) { ?>  </tr> <?php } ?>
 
 
<?php } ?>
	   <tr>
<td colspan="2" align="center"><input type="submit" name="envoyer2" value="Envoyer le tout" /></td>
</t

r>
</table>
<?php } ?>

</form>

Voilà donc en fait, je voudrais avoir le même résultat mais en Javascript (pour n'avoir qu'un seul et même formulaire, et tout envoyer en même temps.)

Pour essayer d'être plus précis, j'aimerais que si je choisi une date de début 01/01/2000, dans les tableaux qui commence à mercredi et qui fini à "date de début * (nb de semaine *7)", que les jours s'incrément de +1jours à chaque fois.

Est-ce possible ?

j'ai mieux saisi ce que tu voulais faire,,

au passage... je ne connaissais pas trop les fonctions date en javascript... & bien je ne trouve pas le javascript super pratique/facile à utiliser pour ce type de fonctions,... peut-être une question d'habitude,

donc,, essaies quelque chose comme ça :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?php 
// Création des variables pour la liste déroulante de la date de début
$mercrediprochain = strtotime("next Wednesday");
$mercredifin = $mercrediprochain+6048001;
$unjour=86400;
?>
<form action="test2.php" method="post">
<select id="jourdebut" name="jourdebut" onchange="listehoraire()" >
 
<?php
for ($c=$mercrediprochain; $c<$mercredifin; $c+=604800)
        {
        // formatage de la date pour le javascript !!
        $c_javascript=date('Y/m/d', $c);
 
        // affichage 'normal' :
        $date=date('d/m/Y', $c);
 
        echo "<option value=".$c_javascript.">Mercredi ".$date."</option>";
        }
?>
 
</select><br />
<select id="horaire" name="horaire" onchange="listehoraire(); derouler(this)">
<option value="0">Selectionnez une valeur</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id=div1 style="width:500px;"></div>
<script>
function listehoraire()
{
// on récupère les valeurs en utilisant document.getElementById
var date2 = document.getElementById('jourdebut').value;
var valeur = document.getElementById('horaire').value;
 
// valeur d'un jour en javascript (les date js sont en millisecondes !)
var unjour=86400000;
 
// on déclare une date de départ
// date2 est la valeur définie sous php, formatée pour le javascript : Y/m/d 
 
var date_origin=new Date(date2);
 
// on récupère le timestamp de notre date de départ
var timestamp=date_origin.getTime();
 
var resultat = "<table border='0' width='50%'>";
// Tableau pour afficher les jours dans les différents tableaux d'horaire
var jourdelasemaine = ["Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche", "Lundi", "Mardi"];
// Boucle afficher a cellule
for (a=0; a<valeur; a++)
	{
	// S'il y a un nombre paire de tableau, recommencer une ligne
	if (a%2==0) 
		resultat += "<tr><td>";
	// sinon, fermer juste la cellule 
	else
		resultat += "<td>";
 
	resultat += '<table style="margin-left:20px;" width="200" border="1" cellspacing="0" cellpadding="0"><tr>'
 
	// Boucle affichant les lignes d'un tableau d'une semaine
	for (b=0; b<7; b++)
		{
		// déclaration de la date du jour suivant
		var next_day=new Date();
		next_day.setTime(timestamp);
 
		// affichage des jours & mois avec 2 chiffres
		jour=next_day.getDate();
		if (jour<10)
			{
			jour="0"+jour;
			}
		mois=next_day.getMonth()+1;
		if (mois<10)
			{
			mois="0"+mois;
			}
		année=next_day.getFullYear();
 
		date_report=jour+"/"+mois+"/"+année;
 
		resultat += '<td width="92">'+jourdelasemaine[b]+' '+date_report+' </td><td width="102"><input value='+timestamp+' name="semaine['+a+']['+b+']" type="text"/></td></tr>';
 
		// en fin de boucle, on incrémente le timestamp pour le jour suivant
		timestamp=timestamp+unjour;
 
		}
	resultat += '</tr></table><br />'
 
	if (a%2==0) 
		resultat += "</td>";
	else
		resultat += "</td></tr>";
 
	}
resultat += "</table>";
document.getElementById("div1").innerHTML = resultat;
}
 
function derouler(liste)
	{
// TODO
// ton code
	}
</script>
<input type="submit" value="Envoyer" />
</form>

j'ai rajouté un mode debug (avec affichage des timestamp) car il y a un bug... assez mystérieux,... -> à partir du "Dimanche 25/10/2009", on perd un jour ! ^^
le script devrait afficher "Lundi 26/10/2009" < & il affiche 2 fois le 25/10/2009 ("Lundi 25/10/2009" )

j'ai vérifié les timestamp... & ça semble juste... :roll:

pour tester :

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
// deb1 = 25/10/2009
var deb1=1256421600000;
 
var test1=new Date();
test1.setTime(deb1);
 
jour=test1.getDate();
mois=test1.getMonth()+1;
année=test1.getFullYear();
date_report1=jour+"/"+mois+"/"+année;
 
alert("timestamp is: "+deb1+" & date_report1 is: "+date_report1);
 
// devrait être le 26/10/2009 !!
var deb1=1256508000000;
 
var test1=new Date();
test1.setTime(1256508000000);
 
jour=test1.getDate();
mois=test1.getMonth()+1;
 
année=test1.getFullYear();
date_report1=jour+"/"+mois+"/"+année;
alert("& timestamp is: "+deb1+" & date_report1 is: "+date_report1);

vraiment bizarre... si quelqu'un a la réponse...

23/08/2009, 10h07
Nowwis

Hum, ce code fonctionne à merveille, j'ai lu pour voir et c'est pas bête du tout ce que tu as fait...

Par contre, j'ai vu le beug du 25/10 et j'ai une simple réponse :

Citation:

Passage heure d'hiver 2009

Le changement d'heure d'hiver 2009 aura lieu le Dimanche 25 octobre : à 3 heures du matin il sera 2 heures.

En fait, les timestamp sont effectué à partir de minuiut, ce qui décalera en heure d'hiver... C'est pourquoi dans tous mes scripts PHP normalement j'utilise les timestamp de 12h comme ça j'ai pas de problème pour les dates !

Je vais essayer de trouver un moyen pour corriger ceci ;)

En tout cas je te remercie beaucoup !
23/08/2009, 22h24
GBS63

cool ! content d'avoir pu aider ! :ccool:
23/08/2009, 23h26
Nowwis

Bon, j'arrive pas à trouver du tout... Je ne vois pas le debug dans ton premier script, pourrais-tu me l'indiquer ?

Ensuite en vérifiant moi-même les timestamp, je me rends compte que le décalage se fait avant le 25/10...

Sur la semaine du 25/10, par exemple :

Mercredi 20/10/2009 10:00
Jeudi 21/10/2009 10:00
Vendredi 22/10/2009 10:00
Samedi 23/10/2009 10:00
Dimanche 24/10/2009 10:00
Lundi 25/10/2009 10:00
Mardi 26/10/2009 10:00

Je trouve ça assez étrange...
Si tu as une solution j'suis preneur ;)
24/08/2009, 00h13
GBS63

[edit]
le débug est ici :

Code:

<input value='+timestamp+'

(ça affiche la valeur du timestamp dans chaque input)

Citation:

Envoyé par Simdu80

le décalage se fait avant le 25/10...

Sur la semaine du 25/10, par exemple :

Mercredi 20/10/2009 10:00
Jeudi 21/10/2009 10:00
Vendredi 22/10/2009 10:00
Samedi 23/10/2009 10:00
Dimanche 24/10/2009 10:00
Lundi 25/10/2009 10:00
Mardi 26/10/2009 10:00

bin là, ça semble bon, non ??
24/08/2009, 10h40
Nowwis

Vérifie s'il existe un mercredi 20/10/2009...

Et donc on voit bien qu'il y a -1 jour sur toutes les valeurs avant le changement d'horaire d'hiver... alors que l'heure est 10h donc normalement pas de soucis...

Erf...
26/08/2009, 10h29
Nowwis

Quelqu'un aurait une idée parce que là je séche dur ???

Merci d'avance
29/08/2009, 11h51
Nowwis

Un petit up au cas où un expert passe.