如何在HTML5中添加具有HH：MM格式和選定日期的時間選擇器？

Question

我到處搜索，但我不滿意答案。最後，我在這裏發佈以獲得答案。

我有兩個datepicker和time pickertextbox它顯示12:00格式與AM & PM。

這裏我想計算總計time其中包括天數和給定的時間。 我想添加這些時間並將其顯示在另一個文本框中。我需要它在HH：MM格式。我不想秒，因爲我的time pickertextbox只顯示HH：MM這對我來說已經足夠了。

我嘗試了很多方法添加，但我沒有得到確切的時間值。

下面是我的HTML代碼

​​

下面是我的腳本代碼

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

上面的代碼是工作在一定程度上，而是例如當我選擇上午8點12分至下午8時12分，我得到的結果是12:32答案應該是12:00。

Answer 1

我認爲你有些過於複雜化。你的ConvertDateFormat（）函數已經給你你需要的東西，那麼爲什麼你再次解析時間？嘗試下面的代碼（感謝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);