0

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
    }
});
3
  • 1
    I don't see any .start_time or .end_time class in your html. Correct me if I am wrong. Maybe you have to use .begin_uren and .eind_uren in place
    – Franco
    Oct 2, 2016 at 1:09
  • You can use online hosting sites for checking this. Oct 2, 2016 at 1:10
  • You should place your script inside <script> and </script>... Oct 2, 2016 at 1:23

1 Answer 1

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>

8
  • I have made this now and put it on jsfiddle.net/7vcnsk7L but still no response with the jquery :(
    – Drokz
    Oct 2, 2016 at 13:56
  • Is this nodejs or what? You run nodejs server-side. Oct 2, 2016 at 14:14
  • 1
    What is this "require()" in your code? This is nodejs or some library. Do you know what you are doing? Oct 2, 2016 at 14:47
  • Looking at your Fiddle... There is serveral library missing like clockpicker, for a start. And you use += in a var declaration. That's why there is «no response with the jquery» And you did not pasted the TimeDiff function @Stoycho Trenchev has made for you. Oct 2, 2016 at 14:49
  • Here is your Fiddle updated in order to work : jsfiddle.net/Bes7weB/hdLodf3z @Stoycho Trenchev deserves that you accept his answer, since I used his code. Oct 2, 2016 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.