2017-04-03 5 views
2

私は時間の開始と終了の2つの入力フィールドを持っていて、相違のための別のフィールドがCall Durationです。私は原因「AM/PM」フォーマットに結果を得るhardtimeを持っていますhh:mm:ssの時差を単純なjavascript/jqueryで計算する

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

0時21分03秒=フィールド上の結果はこの形式になりたいです。 私はこれと同様の質問を見つけましたが、彼は "momentjs"を使用しています。できるだけ多くのプラグインを使用したいとは思っていません。単純なjavascriptやjqueryのプラグインを使用したくないのです。これは私が働いているコードです、私は結果(0:21:3)を得ていますが、私は時、分、秒(00:21:03)の2桁にする必要があります。

$("#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); 
}); 
+0

試したHTMLとコードを表示してください。 – trincot

+0

'new date(new date() - new Date()).toISOString()。split(" T ")[1] .split("。 ")[0]' – dandavis

+0

上記の「中間日」は、古い日付と新しい日付の値... – dandavis

答えて

2

あなたはこのコードを使用することもできます。所要時間は、他の2つの入力値の変更によって更新されるように

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>

を、それは次のようになりますを追加することによって、期間入力を読み取り専用にすることをお勧めします0属性。

+0

このコードをありがとうございます。それは今働いている。元々彼らは手動で差を入れたいと思っていましたが、昨日彼らはそれを自動計算にしたいので、私は今日読書しなければならないかもしれません。 :) – Stonesteel

+0

ユーザーとその(常に変化する)要件:私たちは皆、私たちの忍耐のために何が挑戦できるのかを知っています;-) – trincot

0

あなたが文字列として取得すると仮定すると、おおよそ次のことができます。

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