Calcul différence heure

**Beginner.** · 05/02/2018, 20h17

On peut avec tes input type texte si tu veux mais c'est dommage puisque c'est moins pratique...

Il y a juste une petite étape préliminaire avant d'appliquer l'algorithme que psychadelic t'a indiqué

**kidmig** · 05/02/2018, 20h20

Et c'est quoi cette étape ? (Je suis nul en javascript)

**kidmig** · 05/02/2018, 20h23

Envoyé par psychadelic

ben oui, je t'ai mis l'algo plus haut...

Ah oui effectivement désoler, j'ai essayer de suivre ton algo mais je pense que je suis a chier en javascript car rien a fonctionner

**Beginner.** · 05/02/2018, 21h07

Envoyé par kidmig

Et c'est quoi cette étape ? (Je suis nul en javascript)

C'est de séparer les heures des minutes et convertir les string en nombre...

J'ai fait un test ici : http://jsbin.com/layehavana/edit?html,js,console,output

Ca marche sauf que le résultat ça peut être "1:9" au lieu "01:09" mais rajouter le "0" n'est pas difficile...

**kidmig** · 05/02/2018, 21h19

Excellant mais comme tu a dis le problème c'est de rajouter le "0" explique moi ce qui faut rajouter afin d'avoir le "0" et j'essayerai

**Beginner.** · 05/02/2018, 21h31

Utilise cette fonction :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function calcul() {
    var heureDeb = document.getElementById("heuresI").value.split(":");
    var heureFin = document.getElementById("txhoraire").value.split(":");   
 
    var diff = heureFin[0] * 60 + +heureFin[1] - (heureDeb[0] * 60 + +heureDeb[1]);
    var diffHeure = Math.floor(diff / 60) ;
    var diffMinute = diff % 60 ;
 
    if(diffHeure < 10) diffHeure = "0" + diffHeure ;
    if(diffMinute < 10) diffMinute = "0" + diffMinute ;
    document.getElementById("ttc").value = diffHeure + ":" + diffMinute ;
 
}

**kidmig** · 08/02/2018, 15h32

Désoler de vous déranger mais je pourrais avoir la version décomposer genre je met les heures dans une case et je met les minutes dans une autre. J'ai essayer mais j'y arrive pas

**Beginner.** · 08/02/2018, 15h40

Donne-nous le html que tu veux...

Tu veux utiliser 4 input (de type numérique) ?

**kidmig** · 08/02/2018, 15h43

Oui je veux faire avec 4 champs numérique si possible

Code HTML :

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
<div class="form-group">
	<div class="form-group">
	<label class="col-sm-2 control-label" >Heure Début Matin</label>
		<div class="col-sm-2"><input type="number" name='heuredeb' class='form-control' /></div>
 
	<label class="col-sm-2 control-label" >Minute Début Matin</label>
		<div class="col-sm-2"><input type="number" name='minutedeb' class='form-control' /></div>
 
		<label class="col-sm-2 control-label">Heure Fin Matin</label>
		<div class="col-sm-2"><input type="number" name='heurefin /></div>
 
                 <label class="col-sm-2 control-label" >Minute Fin Matin</label>
		<div class="col-sm-2"><input type="number" name='minutefin' class='form-control' /></div>
 
		<label class="col-sm-2 control-label">Soit :</label>  
		<div class="col-sm-1"><input type="text" name='heurejour' class='form-control' id="ttc" onchange='calcul()' placeholder="--" onchange='calculTotal()' readonly /></div> heure(s) Matin
 
	</div>

Voila j'ai mis mon html

**Beginner.** · 08/02/2018, 16h20

Trop tard...

J'ai fait ça : http://jsbin.com/zequxewocu/edit?html,js,output

A toi de l'adapter...

J'ai mis un min à 0 et un max de 24 pour les heures et de 59 pour les minutes...

PS : Si l'heure de début est supérieur à l'heure de fin évidement ça plante... Tu peux dans ce cas avertir l'utilisateur...

**kidmig** · 08/02/2018, 16h32

Ah d'accord pourtant j'avais réutiliser ton code mais sa fonctionnais pas mais merci et j'ai une autre question : enfaîte j'ai un calcul qui fais la différence entre 2 date et qui me donne le resultat et ce resultat je dois le multiplier au total du calcul d'heure et aussi avec le nombre de personne et le problème est que quand je fais le calcul, genre heure deb :11h30 - heure fin :12h05 x nombre jour total: 3jour x nombre de personne: 1personne = heure au total de la mission : 4h45 au lieu de 4h35

Pourquoi ?

**Beginner.** · 08/02/2018, 16h45

Ben je ne sais pas, il faudrait que tu postes ton code (ou une partie)...

Sinon je ne comprends pas : pourquoi "4h45 au lieu de 4h35" ? Ce n'est pas ce que je vois :

genre heure deb :11h30 - heure fin :12h05 x nombre jour total: 3jour x nombre de personne: 1personne

----> 35mn x 3jours * 1 personne = 1h45 , non ?

**kidmig** · 08/02/2018, 16h59

Efffectivement je me suis tromper c'est 10h30 et non "11h30"

**Beginner.** · 08/02/2018, 16h59

Si c'est à cause de ça que tu as abandonné les input de type "timer" eh bien c'est dommage...

Il faudrait plutôt savoir où bug le reste de ton code...

Je soupçonne que lorsque tu récupères la différence tu ne fais pas ce qu'il faut (séparer les heures des minutes et convertir en nombre...).

**kidmig** · 08/02/2018, 17h02

Je soupçon que lorsque tu récupère la différence tu ne fais pas ce qu'il faut (séparer les heures des minutes et convertir en nombre...).

J'essaye de le faire mais j'y arrive pas et non j'abondonne pas le timer j'essaye avec tout et sa fais plus d'une semaine que je travail sur ce projet de cout horaire et autre et je veux le reussir.

**Beginner.** · 08/02/2018, 17h07

Essayer tout oui mais quand il y a un bug il faut le résoudre et non* essayer une autre chose complètement différente... * Sauf si ce bug est trop difficile à résoudre...

Reprend les input type timer et corrige le bug, reprend ce code : http://jsbin.com/layehavana/edit?html,js,console,output et ajoute le html qu'il manque (nombre de jours, de personnes...) et indique-nous quelle formule tu veux calculer ...

**kidmig** · 08/02/2018, 17h23

Voici mon script :

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
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
<script>
function calcul() {
    var heureDeb = document.getElementById("heuresI").value.split(":");
    var heureFin = document.getElementById("txhoraire").value.split(":");   
 
    var diff = heureFin[0] * 60 + +heureFin[1] - (heureDeb[0] * 60 + +heureDeb[1]);
    var diffHeure = Math.floor(diff / 60) ;
    var diffMinute = diff % 60 ;
 
    if(diffHeure < 10) diffHeure = "0" + diffHeure ;
    if(diffMinute < 10) diffMinute = "0" + diffMinute ;
    document.getElementById("ttc").value = diffHeure + ":" + diffMinute;
 
}
</script>
<script>
function calcul2() {
    var heureDeb = document.getElementById("heuresI2").value.split(":");
    var heureFin = document.getElementById("txhoraire2").value.split(":"); 
 
    var diff = heureFin[0] * 60 + +heureFin[1] - (heureDeb[0] * 60 + +heureDeb[1]);
    var diffHeure = Math.floor(diff / 60) ;
    var diffMinute = diff % 60 ;
 
    if(diffHeure < 10) diffHeure = "0" + diffHeure ;
    if(diffMinute < 10) diffMinute = "0" + diffMinute ;
    document.getElementById("ttc2").value = diffHeure + ":" + diffMinute;
}
</script>
<script>
function calculTotal(){
    var heureDeb = document.getElementById("ttc").value.split(":"); 
	var calcula = document.getElementById("nbjourtotals").value;
	var calculb = document.getElementById("nbpers").value;	
 
    var diff = (heureDeb[0] * 60 + +heureDeb[1]) * calculb * calcula  ;
    var diffHeure = Math.floor(diff / 60) ;
    var diffMinute = diff % 60 ;
 
	if(diffHeure < 10) diffHeure = "0" + diffHeure ;
    if(diffMinute < 10) diffMinute = "0" + diffMinute ;
    document.getElementById("jourtotal").value = diffHeure + ":" + diffMinute;
}
</script>
 
<script>	
window.onload=function CalculDate() {
 
    $( "#datedeb" ).datepicker({ dateFormat: 'dd.mm.yy' });
    $( "#datefin" ).datepicker({ dateFormat: 'dd.mm.yy' });
 
    $('#datefin').change(function() {
      var start = $('#datedeb').datepicker('getDate');
      var end   = $('#datefin').datepicker('getDate');
 
	 if (start<=end) {
        var days   = 1;
        $('#nbjourtotals').val(days);
      }
 
      if (start<end) {
        var days   = ((end - start)/1000/60/60/24)+1;
        $('#nbjourtotals').val(days);
      }
      else {
      }
    }); //end change function
  } ; //end ready
</script>

Voci Mon

Code HTML :

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
40
41
42
43
44
45
46
47
<div class="form-group">
		<label class="col-sm-2 control-label">Date début de la mission:</label>
		<div class="col-sm-2"><input type="text" name='datedeb' class='form-control' placeholder="10/01/2018" id="datedeb" required/></div>
 
		<label class="col-sm-2 control-label">Date fin de la mission :</label>
		<div class="col-sm-2"><input type="text" name='datefin' class='form-control' placeholder="20/01/2018" id="datefin" required/></div>
 
		<label class="col-sm-2 control-label">Soit :</label>
		<div class="col-sm-1"><input type="text" name='nbjourtotal' class='form-control' id="nbjourtotals" placeholder="--" onchange='calculTotal()' readonly required/></div> jour(s).
 
	</div>
 
	<h4 style="text-align:center;"><strong><u>Matin</u></strong></h4>
 
	<div class="form-group">
	<label class="col-sm-2 control-label" >Heure Début Matin</label>
		<div class="col-sm-2"><input type="time" name='heuredeb' class='form-control' min="00:00" max="23:59" id="heuresI" onchange='calcul()' /></div>
 
		<label class="col-sm-2 control-label">Heure Fin Matin</label>
		<div class="col-sm-2"><input type="time" name='heurefin' class='form-control'  min="00:00" max="23:59" id="txhoraire" onchange='calcul()' /></div>
 
		<label class="col-sm-2 control-label">Soit :</label>  
		<div class="col-sm-1"><input type="text" name='heurejour' class='form-control' id="ttc" onchange='calcul()' placeholder="--" onchange='calculTotal()' readonly /></div> heure(s) Matin
 
	</div>
 
	<h4 style="text-align:center;"><u><strong>Après-Midi</strong></u></h4>
 
	<div class="form-group">
	<label class="col-sm-2 control-label" >Heure Début Après-Midi</label>
		<div class="col-sm-2"><input type="time" name='heuredebapm' class='form-control' min="12:00" max="23:59" id="heuresI2" onchange='calcul2()' /></div>
 
		<label class="col-sm-2 control-label">Heure Fin Après-Midi</label>
		<div class="col-sm-2"><input type="time" name='heurefinapm' class='form-control'  min="12:00" max="23:59" id="txhoraire2" onchange='calcul2()' /></div>
 
		<label class="col-sm-2 control-label">Soit :</label>  
		<div class="col-sm-1"><input type="text" name='heurejourapm' class='form-control' id="ttc2" onchange='calcul2()' placeholder="--" readonly /></div> heure(s) Après-Midi
 
	</div><br>
 
	<div class="form-group">
		<label class="col-sm-2 control-label">Nombre de personnes</label>
		<div class="col-sm-1"><input type="text" name='nbpersonne' id="nbpers" class='form-control' onchange='calculTotal()' required/></div>
 
		<label class="col-sm-2 control-label">Soit :</label>  
		<div class="col-sm-1"><input type="text" name='heurejourtotal' class='form-control' id="jourtotal" onchange='calculTotal()' onchange='calculMiss()' placeholder="--" readonly /></div> heure(s)<br> totale(s) mission
	</div>

J'arrive pas a faire des if dans calcultotal() car enfaite si on remplis pas les heures du matin et qu'on remplis les heures de l'apres midi que sa me donne le total d'heure de la mission avec le total de l'heure de l’après midi et vice versa et si le total du matin est remplis+ le total de l’après midi est remplis x le reste(nombre personne etc..) que sa me donne le resultat total de la mission

**Beginner.** · 08/02/2018, 17h48

Ok mais il manque la fonction datepicker() pour tester... Tu l'as prise où ?

En plus tu utilises JQuery que je ne connais pas même si je devine le code...

**kidmig** · 08/02/2018, 18h10

Ah oui désoler je l'ai pris sur un site mais je m'en souvient plus lequel bootstrap-datepickers.js

**Beginner.** · 08/02/2018, 18h36

Ah ouais ça fait beaucoup Jquery + ce datepicker juste pour faire la différence entre deux dates...

Surtout que ça bug chez moi, le nombre de jours est parfois un nombre décimal (non entier)... Est-ce aussi ton cas ?

Calcul différence heure

JavaScript

Partager

Partager