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

Question

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

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

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

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

下面是我的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);
    }
});
});

上面的代码在某种程度上是有效的，但是例如当我 select 8:12 AM 到 8:12 PM 时，我得到的结果是 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 格式和选定日期的时间选择器？

How to add time picker in HTML5 which have HH:MM format with selected Dates?

html

javascript

jquery

datetimepicker

timepicker