0

我想根据来自 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 插件来生成时间。我如何计算差异？

摆弄我现有的代码

4

1 回答 1

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

更新：-“当用户手动输入时间时，有没有办法让这段代码工作？”

里面 $(document).ready(); 您必须为时间选择器输入添加一个“onblur”事件。这是一个例子：jsFiddle

于 2012-08-07T07:45:18.793 回答