선택한 날짜가있는 HH : MM 형식의 HTML5에 시간 선택 도구를 추가하는 방법은 무엇입니까?

Question

나는 모든 곳에서 수색했지만 그 대답에 만족하지 않는다. 마침내 나는 대답을 얻기 위해 여기에 올리고있다.

저는 datepicker과 time pickertextbox이 있으며 AM & PM 인 12:00 형식을 표시합니다.

여기 일 수와 주어진 시간을 포함하는 총 time을 계산하고 싶습니다. 그 시간을 추가하여 다른 텍스트 상자에 표시하고 싶습니다. 나는 그것을 HH : MM 형식으로 필요로한다. 나는 초를 원하지 않는다. time pickertextbox은 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"> 

내가 8:12 오후 오전 8시 12분을 선택하면 코드 위

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

어느 정도뿐만 예를 들어 작동하고 내 스크립트 코드 , 결과는 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);