fonction javascript heure debut<heure fin

Version imprimable

Voir 40 message(s) de cette discussion en une page

bonjour à tous,

j'ai un formulaire ou je choisi l'heure de début et l'heure de fin d'une réservation avec une liste déroulante. Il faudrait que j'ai une fonction qui interdit de mettre une heure de début plus grande qu'une heure de fin... pour cela j'ai ce script :

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
<tr>
				<td> Heure de début :
				<select name='heure_debut' onchange='this.form.heure_fin.options[this.selectedIndex+1].selected=true;'>
					<option value='0'>0</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>
					<option value='7'>7</option>
					<option value='8'>8</option>
					<option value='9'>9</option>
					<option value='10'>10</option>
					<option value='11'>11</option>
					<option value='12'>12</option>
					<option value='13'>13</option>
					<option value='14'>14</option>
					<option value='15'>15</option>
					<option value='16'>16</option>
					<option value='17'>17</option>
					<option value='18'>18</option>
					<option value='19'>19</option>
					<option value='20'>20</option>
					<option value='21'>21</option>
					<option value='22'>22</option>
					<option value='23'>23</option>
				</select>
				</td>
			</tr>
 
			<tr>
				<td> Heure de fin :
				<select name='heure_fin'>
					<option value='0'>0</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>
					<option value='7'>7</option>
					<option value='8'>8</option>
					<option value='9'>9</option>
					<option value='10'>10</option>
					<option value='11'>11</option>
					<option value='12'>12</option>
					<option value='13'>13</option>
					<option value='14'>14</option>
					<option value='15'>15</option>
					<option value='16'>16</option>
					<option value='17'>17</option>
					<option value='18'>18</option>
					<option value='19'>19</option>
					<option value='20'>20</option>
					<option value='21'>21</option>
					<option value='22'>22</option>
					<option value='23'>23</option>
				</select>
				</td>
			</tr>

la ligne de code suivante permet d'augmenter l'heure de fin de +1 par rapport à l'heure de début mais cela n'empêche peut être pas les erreurs...

Code:

<select name='heure_debut' onchange='this.form.heure_fin.options[this.selectedIndex+1].selected=true;'>

Quelqu'un a-t-il une fonction permettant ceci ?? merci à vous

31/03/2010, 14h29
E.Bzz

Bonjour,

Citation:

Envoyé par johan0510

Quelqu'un a-t-il une fonction permettant ceci ??

une fonction je sais pas, mais une solution de test dans la FAQ (à adapter pour prendre en compte les heures), oui ;)

A+

merci de ta réponse e.bzz, je viens de regarder, je pense que cette fonction sera la mieux :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // Mise en place de la première date d1 = new Date(0); d1.setFullYear(2006, 11, 27) // Mise en place de la seconde date d2 = new Date(0); d2.setFullYear(2006, 0, 18) if(d1 > d2) alert("d1 est après d2"); else if(d1 < d2) alert("d1 est avant d2"); else alert("d1 et d2 sont la même date");
il faut que je l'adapte mais comment puis-je l'insérer dans mon formulaire ??

31/03/2010, 14h40
E.Bzz

Citation:

Envoyé par johan0510

comment puis-je l'insérer dans mon formulaire ??

Ben tu en fais une fonction et tu l'appelles sur onchange de chacun des 2 select :koi:

Attention toutefois au cas où l'un des 2 n'est pas encore renseigné ...

A+

okay j'ai fait ce que tu m'as dit le problème c'est qu'il ne se passe rien :cry:
voici ma fonction :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function verifHeure(){
// Mise en place de la première heure
d1 = $heureDebut;
 
// Mise en place de la seconde heure
d2 = $heureFin
 
if(d1 > d2)
alert("L'heure de début est plus grande que l'heure de fin");
else if(d1 <=d2)
alert("L'heure de début est égale à l'heure de fin");
}
</script>

et voici mon formulaire :

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
115
<?php
echo "<form method='post' action='#'>
        <table id='tabAjoutEvent'>
                
                        <tr>
                                Ce formulaire vous permet de saisir un nouvel évènement de la piste de karting.
                        </tr>

                        <tr>
                                <br><br>
                        </tr>
                        
                <tr>
                <td>Date : <input type='date' size = '10' name='date_evenement' value='$date_evenement'/></td>
            </tr>
                        
                        <tr>
                                <td> Heure de début :
                                <select name='heure_debut' onchange='verifHeure(this)'>
                                        <option value='0'>0</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>
                                        <option value='7'>7</option>
                                        <option value='8'>8</option>
                                        <option value='9'>9</option>
                                        <option value='10'>10</option>
                                        <option value='11'>11</option>
                                        <option value='12'>12</option>
                                        <option value='13'>13</option>
                                        <option value='14'>14</option>
                                        <option value='15'>15</option>
                                        <option value='16'>16</option>
                                        <option value='17'>17</option>
                                        <option value='18'>18</option>
                                        <option value='19'>19</option>
                                        <option value='20'>20</option>
                                        <option value='21'>21</option>
                                        <option value='22'>22</option>
                                        <option value='23'>23</option>
                                </select>
                                </td>
                        </tr>
                        
                        <tr>
                                <td> Heure de fin :
                                <select name='heure_fin' onchange='verifHeure(this)'>
                                        <option value='0'>0</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>
                                        <option value='7'>7</option>
                                        <option value='8'>8</option>
                                        <option value='9'>9</option>
                                        <option value='10'>10</option>
                                        <option value='11'>11</option>
                                        <option value='12'>12</option>
                                        <option value='13'>13</option>
                                        <option value='14'>14</option>
                                        <option value='15'>15</option>
                                        <option value='16'>16</option>
                                        <option value='17'>17</option>
                                        <option value='18'>18</option>
                                        <option value='19'>19</option>
                                        <option value='20'>20</option>
                                        <option value='21'>21</option>
                                        <option value='22'>22</option>
                                        <option value='23'>23</option>
                                </select>
                                </td>
                        </tr>
                        
                        <tr>
                                <td>Description de la piste :
                                <select name='id_etat_evenement'>";
                                
                                $sql = ('SELECT * FROM jos_etat'); //on sélectionne tout les champs de la table état
                                $req = mysql_query($sql) or die(mysql_error()); //Envoie une requête à un serveur MySQL  et Retourne le texte associé avec l'erreur générée lors de la dernière requête
                                while($data = mysql_fetch_assoc($req)) // Tant qu'il y a des enregistrements  $data on lance la requête
                                //mysql_fetch_assoc — Lit une ligne de résultat MySQL dans un tableau associatif
                                {
                                        $optionT = $data['id_etat'].' | '.$data['description_etat']; // concaténation des deux éléments de la table état
                                        echo '<option value='.$optionT.'>' .$optionT. '</option>';
                                }
                                mysql_close(); //Ferme la connexion MySQL
                        
                                echo "</select></td>
                        </tr>
                
                        <tr>
                                <td><br></td>
                        </tr>
                
                <tr>
                        <td>
                        <a href='javascript:void(0)'>
                        <input name='reset' type='reset' value='Effacer' class='reset'/>
                        </a>

                        <a href='javascript:void(0)'>
                        <input type='submit' name='envoi' value='Envoyer' class='submit'/>
                        </a>
                        </td>
                </tr>
                        
                </table>
    </form>";
        
?>

Y-a-t-il une erreur?

31/03/2010, 15h01
E.Bzz

Citation:

Envoyé par johan0510

Y-a-t-il une erreur?

8O

Relis la FAQ ...

A+

c'est effectivement ce que je fais mais je ne trouve toujours pas la solution...
voici le code que j'ai modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script> function verifHeure(){ // Mise en place de la première heure d1 = heure_debut; // Mise en place de la seconde heure d2 = heure_fin if(d1 > d2) alert("L'heure de début est plus grande que l'heure de fin"); else if(d1 <=d2) alert("L'heure de début est égale à l'heure de fin"); } </script>
mais je ne pense pas que cela vienne de ça... c'est surement mon onchange ?? :calim2:

31/03/2010, 15h11
E.Bzz
Un indice : il faut que tu adaptes cette partie là :
Code:

1 2 3 4 5 6 7 // Mise en place de la première date d1 = new Date(0); d1.setFullYear(2006, 11, 27) // Mise en place de la seconde date d2 = new Date(0); d2.setFullYear(2006, 0, 18)
Je sais : c'était plus simple de la supprimer, mais du coup ça marche un peu moins bien :mrgreen:

A+
31/03/2010, 15h17
johan0510

Le problème c'est que moi j'ai une liste déroulante avec les choix des heures. C'est à dire 1, 2, 3, 4 etc... ce n'est pas une heure de type 00:00:00.
Dans ma base de données c'est un smallint (2).

Je n'ai donc pas besoin de cette partie je pense... t'en penses quoi ?
31/03/2010, 15h29
E.Bzz

Citation:

Envoyé par johan0510

Je n'ai donc pas besoin de cette partie je pense... t'en penses quoi ?

Si pour une même date tu autorises une heure de début = 17 et une heure de fin = 8, effectivement tu peux te passer de gérer les heures. :mrgreen:

Pour les dates, faudra quand même que tu intègres les tiennes.
A moins que tu souhaites comparer à chaque fois le 27/12/2006 et le 18/01/2006 ... :?

Avant de te décider, je te propose un peu de lecture (toute la page, pas seulement la comparaison de 2 dates), ça te donnera peut être des idées :
http://javascript.developpez.com/faq/?page=date

A+
31/03/2010, 15h36
johan0510

1 pièce(s) jointe(s)

je me re-explique ;)
j'ai un formulaire dont voici l'interface :

http://www.developpez.net/forums/att...1&d=1270042458

Je vois pas pourquoi tu me parles de la date sachant que je souhaite gérer que l'heure de début et l'heure de fin. En gros je souhaite juste que :
heure_debut<heure_fin

je ne pense pas avoir besoin d'une fonction comme celle intitulé "Comment vérifier si un champ qui contient la date et l'heure au format(aaaa-mm-jj hh:mm:ss) est bien rempli ?" dans le lien que tu m'as fourni. je me trompes ?
31/03/2010, 15h56
E.Bzz
Citation:

Envoyé par johan0510

je me trompes ?

Non.
C'est moi qui me suis trompé en pensant qu'il s'agissait d'une vrai question :roll:
Code:

1 2 if (a<=b) { ...}
A+

tu peux le dire si ma question est basique.. sa ne me vexera pas ;)
Code:

1 2 3 4 5 6 7 8 9 function verifheure(){ // Mise en place de la première heure var heure_Debut; // Mise en place de la seconde heure var heure_Fin if(a <= b) alert("L'heure de début est plus petite ou égale à l'heure de fin"); }
il suffit seulement de ça ?

Disons que je cherchais dans la mauvaise direction : ce n'est qu'une comparaison de valeurs numériques sans lien avec les dates/heures :aie:
Code:

1 2 3 4 5 6 7 8 9 function verifheure(){ // Mise en place de la première heure var heure_Debut = document.getElementById('heure_debut').value; // Mise en place de la seconde heure var heure_Fin = document.getElementById('heure_fin').value; if (heure_Fin <= heure_Debut) alert("L'heure de début est plus petite ou égale à l'heure de fin"); }
A+

31/03/2010, 16h26
E.Bzz

Un oubli : il faut que tu ajoutes un id égal au name dans chacun des select ...

A+

merci e.Bzz pour tes réponses, j'ai fait ce que tu m'as dit c'est a dire :

code de la fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 <script> function verifheure(){ // Mise en place de la première heure var heure_Debut = document.getElementById('heure_debut').value; // Mise en place de la seconde heure var heure_Fin = document.getElementById('heure_fin').value; if (heure_Fin <= heure_Debut) alert("erreur, l'heure de fin doit être supérieur à l'heure de début"); } </script>
code des select :

Code:

<select name='heure_debut' id='heure_debut' onchange='verifheure(this)'>

Code:

<select name='heure_fin' id='heure_fin' onchange='verifheure(this)'>

le code fonctionne cependant je souhaiterais que quand je clique sur "envoyer" cela se bloque si c'est pas possible...

il faut que je rajoute un "onchange" ??

Essaye quand même de faire preuve d'un peu d'imagination...
On se doute bien que le but n'est pas en soi d'afficher une alert, donc complète le code :
Code:

1 2 3 4 5 6 7 if (heure_Fin <= heure_Debut) alert("erreur, l'heure de fin doit être supérieur à l'heure de début"); document.getElementById('id_du_submit').disabled = true; } else{ document.getElementById('id_du_submit').disabled = false; }
Mais ce n'est qu'un exemple !

31/03/2010, 20h43
FMaz
Peut-être bourrin comme solution, mais s'il rajoute des 0 à ses heures et ses minutes, pour être capable de compiler des valeur telle que:
"01:32"
"11:12"
"14:01"

... un tri par ordre alphabetique va mettre ses trucs dans l'ordre, alors il pourrais simplement faire:
Code:

1 2 3 4 if("01:32" > "14:01") { }
... oui oui, ca marche ! :roll:

Bon c'est un peu dégueulasse, mais vu la simplicité et le nombre de lignes, je me devais de le souligner :roll:

Edit:
Visiblement j'avais pas tout lu le sujet :aie:
Je pensais qu'il avait 2 selectbox:
[Heure] : [Minute]

Et qu'on lui suggérais de générer des timestamps pour faire la comparaison.

merci bovino mais je comprends pas...
je viens de faire :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function verifheure(){ // Mise en place de la première heure var heure_Debut = document.getElementById('heure_debut').value; // Mise en place de la seconde heure var heure_Fin = document.getElementById('heure_fin').value; if (heure_Fin <= heure_Debut) alert("erreur, l'heure de fin doit être supérieur à l'heure de début"); document.getElementById('envoi').disabled = true; } else{ document.getElementById('envoi').disabled = false; }
mes select :

Code:

<select name='heure_debut' id='heure_debut' onchange='verifheure(this)'>

Code:

<select name='heure_fin' id='heure_fin' onchange='verifheure(this)'>

mon submit

Code:

<input type='submit' name='envoi' id='envoi' value='Envoyer' class='submit' onchange='verifheure(this)'/>

et ça ne fonctionne pas... :cry:

31/03/2010, 20h47
FMaz

Il te manque une {

Edit
et une } aussi.

Re-edit:
Et il me semble avoir un certain bug de logique dans le fait de tripple valider les champs. Si par défaut il sont à 0 et 0, il faudra ABSOLUMENT que l'utilisateur commence par définir la fin AVANT le début.

Ce qui me semble contre-ergonomique et contre-intuitif.

Voir 40 message(s) de cette discussion en une page