Question

I would like to calculate time difference based on dynamic id from 2 text-fields and display it on third.

My current code:

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

I am using trent’s timepicker addon in my code to generate time. How can I calculate the difference?

fiddle of my existing code

Answer 1

You can use the ‘onSelect’ event for the ‘timepicker’ Object like in the example below:

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

Yes, that’s true. I missed the ‘Add’ button and these selectors were meant to work for one row. Here is an update of the previous code:

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

UPDATE: — “is there a way to make this code work when users enters time manually ?”

Inside $(document).ready(); you’ll have to add an ‘onblur’ event for the timepicker input.
Here is an example: jsFiddle