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

Question

I searched everywhere but I'm not satisfied by the answer. At last I'm posting here to get the answer.

I have two datepicker and time picker textbox which displays 12:00 format with AM & PM.

Here I want to calculate the TOTAL time which includes number of days and given time. I want to add those time and display it in another text box. I need it in HH:MM format. I don't want seconds as my time picker textbox shows only HH:MM which is enough for me.

I tried many methods to add but i'm not getting the exact time value.

Below is my HTML code

<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">

Below is my script code

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

Above code is working for some extent BUT for example when I select 8:12 AM to 8:12 PM , the result I'm getting is 12:32 where answer should be 12:00.

Answer 1

I think you are over-complicating things somewhat. Your ConvertDateFormat() function already gives you what you need, so why are you parsing the time again? Try the code below (with thanks to this this answer)

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