Calculate diff on start and end time with jquery

Question

After some searching.

I have made this with some code snippets from the NET. But it's not working properly.

Can somebody please check this for me. and the second thing i want it to do is when i add a new row i must do the same start and end times again.
I know it works with (for) or i++ but i don't know where to start.

Sorry for my spell.

Thanks.

<table class="tijd table">
    <thead>
        <tr>
        <th>#</th>
        <th>Datum</th>
        <th>Begin tijd</th>
        <th>Eind tijd</th>
        <th>totaal tijd</th>
        </tr>
    </thead>
    <tbody>
        <tr class="ts-row">
            <th scope="row" style="vertical-align: middle;">
                1
            </th>
            <td>
                <div class="input-group col-md-7">
                    <input type="text" class="form-control start_time" style="height: 30px;" name="1" placeholder="dd-mm-yyyy">
                    <span class="input-group-addon" data-toggle="date-selector">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </td>
            <td class="ts-range">
                <div class="input-group clockpicker col-md-5" data-placement="left" data-align="top" data-autoclose="true">
                    <input type="text" class="form-control end_time" style="height: 30px;">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </td>
            <td class="ts-range">
                <div class="input-group clockpicker col-md-5" data-placement="left" data-align="top" data-autoclose="true">
                    <input type="text" class="form-control total_time" style="height: 30px;">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-time"></span>
                    </span>
                </div>
            </td>
            <td>
                <input readonly class="form-control aantaluren" style="height: 30px;">
            </td>
        </tr>
    </tbody>
</table> 


$(document).ready(function)){

    var a = $(".start_time").val(); //start_time = 1:30
    var b = $(".end_time").val();  //end_time = 3:00

    function TimeDiff(a,b) {

        var first = a.split(":")
        var second = b.split(":")

        var xx;
        var yy;

        if(parseInt(first[0]) < parseInt(second[0])){

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - parseInt(second[0])
            }

        }else if(parseInt(first[0]) == parseInt(second[0])){

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) - parseInt(second[0])
            }

        }else{

            if(parseInt(first[1]) < parseInt(second[1])){

                yy = parseInt(first[1]) + 60 - parseInt(second[1]);
                xx = parseInt(first[0]) - 1 - parseInt(second[0])

            }else{
                yy = parseInt(first[1]) - parseInt(second[1]);
                xx = parseInt(first[0]) - parseInt(second[0])
            }
        }

        if(xx < 10)
        xx = "0" + xx

        if(yy < 10)
        yy = "0" + yy

        //alert(xx + ":" + yy)
        $('.total_time').val(xx + ":" + yy);  //total = 2:30
    }
});

Answer 1

I made some changes in your JavaScript. You better name your variables with descriptive names. You have to put the JavaScript code in script tags. Please read more about HTML and JavaScript.

var endTime = '6:30';
var startTime = '3:00';

function TimeDiff(endTime, startTime) {
  var first = endTime.split(":");
  var second = startTime.split(":");
  var xx;
  var yy;
  if (parseInt(first[0]) < parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - parseInt(second[0]);
    }
  } else if (parseInt(first[0]) == parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  } else {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  }
  if (xx < 10) {
    xx = "0" + xx;
  }

  if (yy < 10) {
    yy = "0" + yy;
  }

  return xx + ":" + yy;
}

alert(TimeDiff(endTime, startTime));

You don't have elements with start_time, end_time and total_time classes. You have to have some inputs with that classes, and then get them with

var startTime = $(".start_time").val();
var endTime = $(".end_time").val();
var timeDifference = TimeDiff(endTime, startTime);
$('.total_time').val(timeDifference);

function TimeDiff(endTime, startTime) {
  var first = endTime.split(":");
  var second = startTime.split(":");
  var xx;
  var yy;
  if (parseInt(first[0]) < parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - parseInt(second[0]);
    }
  } else if (parseInt(first[0]) == parseInt(second[0])) {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) + 24 - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  } else {
    if (parseInt(first[1]) < parseInt(second[1])) {
      yy = parseInt(first[1]) + 60 - parseInt(second[1]);
      xx = parseInt(first[0]) - 1 - parseInt(second[0]);
    } else {
      yy = parseInt(first[1]) - parseInt(second[1]);
      xx = parseInt(first[0]) - parseInt(second[0]);
    }
  }
  if (xx < 10) {
    xx = "0" + xx;
  }

  if (yy < 10) {
    yy = "0" + yy;
  }

  return xx + ":" + yy;
}
$('.submit').click(function(){
  
  var startTime = $(".start_time").val();
  var endTime = $(".end_time").val();
  $('.total_time').text(TimeDiff(endTime, startTime)); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <lable>Start time</lable>
  <input class="start_time"><br>
  <lable>End time</lable>
  <input class="end_time"><br>
  <input class="submit" type="submit" name="submit" value="Total Time">
</form>
 <br>
<span class="total_time"></span>