0

2 つのテキスト フィールドの動的 ID に基づいて時差を計算し、3 番目に表示したいと思います。

私の現在のコード:

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

コードでトレントのタイムピッカーアドオンを使用して時間を生成しています。どうすれば差額を計算できますか?

私の既存のコードのフィドル

4

1 に答える 1

1

以下の例のように、「timepicker」オブジェクトに「onSelect」イベントを使用できます。

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

はい、本当です。「追加」ボタンを見逃しており、これらのセレクターは 1 つの行に対して機能することを意図していました。以前のコードの更新は次のとおりです。

$(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」イベントを追加する必要があります。以下に例を示します。

于 2012-08-07T07:45:18.793 に答える