Question

我到处搜索，但我对答案不满意。最后我在这里发帖来得到答案。

我有两个datepicker和time picker textbox，它显示12:00格式的AM＆amp; PM。

这里我想计算TOTAL time，其中包括天数和给定时间。我想添加这些时间并将其显示在另一个文本框中。我需要它以 HH：MM 格式。我不想要秒，因为time picker textbox仅显示 HH：MM ，这对我来说已经足够了。

我尝试了很多方法来添加，但我没有得到确切的时间值。

以下是我的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">

以下是我的脚本代码

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

如何在HTML5中添加具有选定日期的HH：MM格式的时间选择器？

1 个答案: