Comment ajouter un sélecteur de temps en HTML5 qui ont le format HH: MM avec les dates sélectionnées?

Question

J'ai cherché partout mais je ne suis pas satisfait de la réponse. Enfin, je poste ici pour obtenir la réponse.

J'ai deux datepicker et time pickertextbox qui affiche le format 12:00 avec AM & PM.

Ici, je veux calculer le TOTAL time qui comprend le nombre de jours et le temps donné. Je souhaite ajouter ces heures et les afficher dans une autre zone de texte. J'en ai besoin en format HH: MM. Je ne veux pas de secondes car mon time pickertextbox montre seulement HH: MM ce qui me suffit.

J'ai essayé de nombreuses méthodes à ajouter mais je ne reçois pas la valeur exacte temps.

Ci-dessous est mon code HTML

<input type="date" id="opening_date"> 
<input type="date" id="closing_date"> 
<input type="time" class="time" id="garage_out_time"> 
<input type="time" class="time" id="garage_in_time"> 
<input type="text" id="total_hours"> 

Ci-dessous est mon code de script

$(document).ready(function() { 
function ConvertDateFormat(d, t) { 
    var dt = d.val().split('/'); 
    return dt[0] + '/' + dt[1] + '/' + dt[2] + ' ' + t.val(); 
} 
$(".time").change(function() { 
    var start = new Date(ConvertDateFormat($('#opening_date'), $('#garage_out_time'))); 
    var end = new Date(ConvertDateFormat($('#closing_date'), $('#garage_in_time'))); 
    console.log(start, end); 
    var diff = new Date(end - start); 
    var days = Math.floor(diff/1000/60/60/24); 
    var hours = Math.floor((diff % (1000 * 60 * 60 * 24))/1000/60/60); 

    var total = (days * 24) + hours; 

    var startTime = document.getElementById("garage_out_time").value; 
    var endTime = document.getElementById("garage_in_time").value; 
    var s = startTime.split(':'); 
    var e = endTime.split(':'); 
    var endtime = parseInt(e[1], 10); 
    var starttime = parseInt(s[1], 10); 
    var min = endtime + starttime; 
    var minutes = min ; 
    var minhours = Math.floor(minutes/60); 
    minutes = minutes % 60; 

    total = total + minhours; 
    if(minutes > 9){ 
    $("#total_hours").val(total+":"+ minutes); 
    } else { 
     $("#total_hours").val(total+":0"+ minutes); 
    } 
}); 
}); 

code ci-dessus fonctionne pour une certaine mesure, mais par exemple lorsque je sélectionne 8h12-20:12 , le résultat que je reçois est 12:32 où la réponse devrait être 12:00.

Answer 1

Je pense que vous compliquez un peu les choses. Votre fonction ConvertDateFormat() vous donne déjà ce dont vous avez besoin, alors pourquoi relisez-vous l'heure? Essayez le code ci-dessous (grâce à cette réponse this)

var start = new Date(ConvertDateFormat($('#opening_date'), $('#garage_out_time'))); 
var end = new Date(ConvertDateFormat($('#closing_date'), $('#garage_in_time'))); 
console.log(start, end); 
var diff = new Date(end - start); 
var mins = Math.floor(diff/ 60000 % 60); 
var hours = Math.floor(diff/3600000 % 24); 
var days = Math.floor(diff/86400000  ); 
console.log('days='+days+' hrs='+hours+' mins='+mins); 
var totalHours = (days * 24) + hours; 
var minsStr = (mins < 10) ? '0' + mins : mins; 
$('#total_hours').val(totalHours + ':' + minsStr);