代码之家  ›  专栏  ›  技术社区  ›  Kirataka

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

  •  0
  • Kirataka  · 技术社区  · 8 年前

    我到处找,但我对答案不满意。最后,我在这里发布,以获得答案。

    我有两个 datepicker time picker textbox 其显示具有AM&下午。

    在这里,我要计算总数 time 其包括天数和给定时间。 我想添加这些时间并将其显示在另一个文本框中。我需要它 HH:MM 总体安排我不想要秒作为我的 文本框 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时,我得到的结果是 答案应该在哪里 .

    1 回复  |  直到 8 年前
        1
  •  0
  •   Community CDub    8 年前

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