如何計算開始時間和結束時間之間的時差動態生成每行動態ID？

Question

我想根據來自2個文本字段的動態ID計算時間差，並在第三個顯示它。

我當前的代碼：

function mdiff(t1,t2) { 
    var t1 = hour2mins(t1); var t2=hour2mins(t2); 
    var ret = mins2hour(parseInt(t2-t1)); 
    if(t2<t1) { 
    ret=mins2hour(parseInt(parseInt(t2+1440)-t1)); 
    } 
    return ret; 
} 

$("input.[rel=diff]").keyup(function (b){ 
    $("#duration").val(mdiff($("#starttime).val(),$("#endtime").val())); 
}); 

我用我的代碼Trent的timepicker插件生成時間。我如何計算差異？

fiddle of my existing code

Answer 1

您可以使用 'ONSELECT' 事件的 'timepicker' 對象就像在下面的例子：

$(document).ready(function() { 

    $("#AddRow").click(function() { 
     var row = '<tr><td>' + '<input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="diff"/></td>' + '<td><button>delete</button>' + '</td></tr>'; 
     $("#table").append(row); 

     // id generating for class timepicker starts here 
     var i=0; 
     $('input.timepicker').each(function(){ 
      i++; 
      $(this).attr("id","timepicker_"+i); 
     }); 
     // ends here 
     //trail diff id generator 
     var j=0; 
     $('input.diff').each(function(){ 
      j++; 
      $(this).attr("id","diff_"+j); 
     }); 
     //ends here 

    }); 

    $('body').on('focus', ".timepicker", function() { 
     $(this).timepicker({ 

      onSelect: function(dateText, instance) { 

       // Check for valid values 
       if ($('input.timepicker:eq(0)').val() === '' || $('input.timepicker:eq(1)').val() === '') return false; 

       var time1 = $('input.timepicker:eq(0)').val().split(/:/), 
        time2 = $('input.timepicker:eq(1)').val().split(/:/);          

        timeDiff(time1[0]*3600 + time1[1]*60, time2[0]*3600 + time2[1]*60); 
      } 
     }); 
    }); 

    $("#table").on("click", "button", function() { 
     $(this).closest("tr").remove(); 
    }); 
    //table structure ends here 
}); 

function timeDiff(time1, time2) { 
    var td = time2 - time1, 
     hours = parseInt(td/3600), 
     minutes = parseInt((td - hours*3600)/60), 
     diff = ((hours < 10 && hours >= 0) ? ('0' + hours) : hours) + ':' + ((minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes); 

    $('input.diff').val(diff); 
} 

是的，這是事實。我錯過了「添加」按鈕，這些選擇器只能用於一行。下面是以前的代碼的更新：

$(document).ready(function() { 

    $("#AddRow").click(function() { 
     var row = '<tr><td>' + '<input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="timepicker" value=""/></td>' + '<td><input type=text class="diff"/></td>' + '<td><button>delete</button>' + '</td></tr>'; 
     $("#table").append(row); 

     // id generating for class timepicker starts here 
     var i=0; 
     $('input.timepicker').each(function(){ 
      i++; 
      $(this).attr("id","timepicker_"+i); 
     }); 
     // ends here 
     //trail diff id generator 
     var j=0; 
     $('input.diff').each(function(){ 
      j++; 
      $(this).attr("id","diff_"+j); 
     }); 
     //ends here 

    }); 

    $('body').on('focus', ".timepicker", function() { 
     $(this).timepicker({ 

      onSelect: function(dateText, instance) { 



       var currentInput = ($(instance.input).length > 0 ? $(instance.input) : $(instance.$input)), 
        nextInput = $(currentInput).closest('tr').find('input.timepicker[id!="' + $(currentInput).attr('id') + '"]'); 

       // Check for valid values    
       if ($(currentInput).val() === '' || $(nextInput).val() === '') return false; 

       var time1 = $(currentInput).val().split(/:/), 
        time2 = $(nextInput).val().split(/:/); 

       // switch time 
       if ($(currentInput).parents('td').index() > 0) { 
        var temp = time1; 
        time1 = time2; 
        time2 = temp; 
       } 

        timeDiff(time1[0]*3600 + time1[1]*60, time2[0]*3600 + time2[1]*60, currentInput); 
      } 
     }); 
    }); 

    $("#table").on("click", "button", function() { 
     $(this).closest("tr").remove(); 
    }); 
    //table structure ends here 
}); 

function timeDiff(time1, time2, instance) { 
    var td = time2 - time1, 
     hours = parseInt(td/3600), 
     minutes = parseInt((td - hours*3600)/60), 
     diff = ((hours < 10 && hours >= 0) ? ('0' + hours) : hours) + ':' + ((minutes < 10 && minutes >= 0) ? ('0' + minutes) : minutes); 

    $(instance).closest('tr').find('input.diff').val(diff); 
} 

更新： - 「有沒有辦法讓這個代碼工作當用戶手動輸入的時間？」

Inside $（document）.ready（）;您必須爲timepicker輸入添加一個'onblur'事件。 這裏是一個例子：jsFiddle