Tengo dos campos de entrada para el inicio y el final de la hora y hay otro campo para la diferencia que es la Duración de la llamada. Quiero que el resultado en el campo tenga este formato = 00:21:03
<div class="inline_divider"> <label for="form_qa_startcall" class="qaw_form_label3">Start of Call</label> <input type="text" id="form_qa_startcall" class="qaw_form_input3" placeholder="eg. 11:36:47 PM" maxlength="11"> </div> <div class="inline_divider"> <label for="form_qa_endcall" class="qaw_form_label3">End of Call</label> <input type="text" id="form_qa_endcall" class="qaw_form_input3" placeholder="eg. 11:46:47 PM" maxlength="11"> </div> <div class="inline_divider"> <label for="form_qa_callduration" class="qaw_form_label3">Call Duration</label> <input type="text" id="form_qa_callduration" class="qaw_form_input3" placeholder="eg. 00:01:10" maxlength="8"> </div>Tengo dificultades para obtener el resultado debido al formato "AM/PM". Encontré una pregunta similar como esta pero él está usando "momentjs". En la medida de lo posible, no quiero usar ningún complemento, solo bastará con un javascript simple o desde jquery. Este es el código que tengo funcionando, obtengo el resultado (0:21:3) pero necesito que sean dos dígitos para horas, minutos y segundos (00:21:03).
$("#form_qa_endcall").on('keyup',function(){ var callStart = $('#form_qa_startcall').val(); var callEnd = $('#form_qa_endcall').val(); var timeStart = new Date("01/01/2007 " + callStart); var timeEnd = new Date("01/01/2007 " + callEnd); function datediff(fromDate,toDate,interval) { var second=1000, minute=second*60, hour=minute*60, day=hour*24, week=day*7; fromDate = new Date(fromDate); toDate = new Date(toDate); var timediff = toDate - fromDate; if (isNaN(timediff)) return NaN; switch (interval) { case "years": return toDate.getFullYear() - fromDate.getFullYear(); case "months": return ( ( toDate.getFullYear() * 12 + toDate.getMonth() ) - ( fromDate.getFullYear() * 12 + fromDate.getMonth() ) ); case "weeks" : return Math.floor(timediff / week); case "days" : return Math.floor(timediff / day); case "hours" : return Math.floor(timediff / hour); case "minutes": return Math.floor(timediff / minute); case "seconds": return Math.floor(timediff / second); default: return undefined; } } var seco = datediff(timeStart, timeEnd, 'seconds') % 60; var minu = datediff(timeStart, timeEnd, 'minutes') % 60; var hour = datediff(timeStart, timeEnd, 'hours'); $('#form_qa_callduration').val(hour + ":" + minu + ":" + seco); });Podrías usar este código:
function diff(a, b) { function toTime(a) { return Date.parse('1970-01-01 ' + a.substr(0,8)) / 1000 + (a.includes('PM') && (12*60*60)); } var d = toTime(b) - toTime(a); return d >= 0 ? new Date(0,0,0,0,0,d).toTimeString().substr(0,8) : ''; } $('.qaw_form_input3').on('input', function () { $('#form_qa_callduration').val( diff($('#form_qa_startcall').val(), $('#form_qa_endcall').val())); }).click(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="inline_divider"> <label for="form_qa_startcall" class="qaw_form_label3">Start of Call</label> <input type="text" id="form_qa_startcall" class="qaw_form_input3" placeholder="eg. 11:36:47 PM" maxlength="11"> </div> <div class="inline_divider"> <label for="form_qa_endcall" class="qaw_form_label3">End of Call</label> <input type="text" id="form_qa_endcall" class="qaw_form_input3" placeholder="eg. 11:46:47 PM" maxlength="11"> </div> <div class="inline_divider"> <label for="form_qa_callduration" class="qaw_form_label3">Call Duration</label> <input type="text" id="form_qa_callduration" class="qaw_form_input3" placeholder="eg. 00:01:10" maxlength="8" readonly> </div> Dado que la duración se actualizará mediante cambios en los otros dos valores de entrada, sería una buena idea hacer que la entrada de duración sea de solo lectura, agregando el atributo de readonly .
Suponiendo que lo obtenga como cadenas, puede hacer aproximadamente lo siguiente.
var str1 = "11:31:51 AM"; var str2 = "11:52:54 AM"; str1 = str1.split(':'); str2 = str2.split(':'); if(str1[2].split(' ').pop() != str2[2].split(' ').pop()) { // one is AM other is PM str1[0] = parseInt(str1[0])+12; } var finalStr = m(str1[0], str2[0])+":"+m(str1[1], str2[1])+":"+m(str1[2], str2[2]); console.log(finalStr); function m(n1,n2) { return Math.abs(parseInt(n1)-parseInt(n2)); }