How to sum up in bootstrap time picker

Question

I am using Bootstrap time picker which can we be found here.
I have 3 time picker on each row.

For Design time
For Development time
Total time (i.e. Design Time + Development Time)

User will enter the Design time, and the Development time on each row.
Now my question is, How to sum up the Design time with Development time into the Total time field on each row.
And also the end row will sum the total Design time, total Develop time and All the total time (i.e. total Design time + total Develop time).

A demo img can be seen here: demo_img_of_project

After successfully failing in all my attempts, come here for the help.

The view portion

<form action="" method="">
  <?php
    // count number is coming from the URL
    for($i=1; $i<=$count; $i++){
  ?>
  <tr>
    // ... (... means Rest of the code is commented out) 
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <?php echo "<input type=\"text\" class=\"form-control designTime$i\" >"; ?>
      </div>
    </td>
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <?php echo "<input type=\"text\" class=\"form-control devTime$i\" >"; ?>
      </div>
    </td>
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <?php echo "<input type=\"text\" class=\"form-control totalTime$i\" readonly>"; ?>
      </div>
    </td>
    // ... 
  </tr>
  <?php
    }
  ?>
  <tr>
    // ... 
    <td colspan="2">Total Time of Spent</td>
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control totalDesign" readonly>
      </div>
    </td>
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control totalDev" readonly>
      </div>
    </td>
    <td>
      <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control totalOfTime" readonly>
      </div>
    </td>
    // ... 
  </tr>
  </form>

JS part:

// count number is coming from the URL
for(let i=1; i<=count; i++){
  // Design Time, Development Time, Total Calculation
  $(`.designTime${i}, .devTime${i}, .totalTime${i}`).timepicker({
    template: 'dropdown',
    appendWidgetTo: 'body',
    maxHours: 24,
    showSeconds: true,
    showMeridian: false,
    defaultTime: '00:00:00'
  });
}
// In Total calculation
$('.totalDesign, .totalDev, .totalOfTime').timepicker({
  template: 'dropdown',
  appendWidgetTo: 'body',
  maxHours: 24,
  showSeconds: true,
  showMeridian: false,
  defaultTime: '00:00:00'
});

I would use the changeTime.timepicker event from the doc on both design time and development time to calculate the sum of their values converted in seconds and then apply the result on the total Of Time. — Michael Tétreault, Aug 09 '22 at 16:19

Michael Tétreault · Answer 1 · 2022-08-11T19:58:41.497

I would use the changeTime.timepicker event from the documentation you provided. On both designTime and devTime inputs id attributes to calculate the sum of their values converted in seconds and then sum them in seconds as well to finally apply the result reconverted in hh:mm:ss on the total Of Time.

I removed the PHP from the code for the example, here is a working example:

<html>
<head>
    <title>test bootstrap timepickers sum on change</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
    <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control designTime timepicker-input" id="desingTime1">
    </div>

    <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control devTime timepicker-input" id="devTime1">
    </div>

    <div class="input-group bootstrap-timepicker timepicker">
        <input type="text" class="form-control totalTime timepicker-input" id="totalTime1">
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>

    <script>
        $(document).ready(function() {
            $('.timepicker-input').timepicker({
                template: 'dropdown',
                maxHours: 24,
                showSeconds: true,
                showMeridian: false,
                defaultTime: '00:00:00'
            });

            $('.timepicker-input').timepicker().on('changeTime.timepicker', function(e) {
                // retrieve values and convert in seconds
                var desingTime = $("#desingTime1").val();
                var desingTimeValues = desingTime.split(":");
                var desingTimeHoursInSeconds = parseInt(desingTimeValues[0]*60*60);
                var desingTimeMinutesInSeconds = parseInt(desingTimeValues[1]*60);
                var desingTimeSeconds = parseInt(desingTimeValues[2]);
                var desingTimeNumberOfSeconds = desingTimeHoursInSeconds+desingTimeMinutesInSeconds+desingTimeSeconds;
                
                var devTime = $("#devTime1").val();
                var devTimeValues = devTime.split(":");
                var devTimeHoursInSeconds = parseInt(devTimeValues[0]*60*60);
                var devTimeMinutesInSeconds = parseInt(devTimeValues[1]*60);
                var devTimeSeconds = parseInt(devTimeValues[2]);
                var devTimeNumberOfSeconds = devTimeHoursInSeconds+devTimeMinutesInSeconds+devTimeSeconds;  
                
                // sum
                var totalTime = desingTimeNumberOfSeconds+devTimeNumberOfSeconds;
                
                // convert total of seconds to hh:mm:ss
                var totalTimeConvert = new Date(totalTime * 1000).toISOString().slice(11, 19);

                // apply on totalTime1 timepicker input
                $('#totalTime1').timepicker('setTime', totalTimeConvert);
            });
        });
    </script>
</body>
</html>

EDIT: Here is an other example of what I think should work since i did not test it. I did change the way that i get the values of the timepickers by adding a timePickersWrapper and using its value while looping through the timepickers and counting a grand total at the end.

<html>
<head>
    <title>test bootstrap timepickers sum on change</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
    <?php
    // count number is coming from the URL
    for($i = 0; $i < $count; $i++) {
    ?>
    <div class="timePickersWrapper" id="<?php echo $i; ?>">
        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control designTime timepicker-input" id="desingTime<?php echo $i; ?>">
        </div>

        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control devTime timepicker-input" id="devTime<?php echo $i; ?>">
        </div>

        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control totalTime timepicker-input" id="totalTime<?php echo $i; ?>">
        </div>
    </div>
    <?php
    // for end
    }
    ?>

    <div class="timePickersTotalsWrapper">
        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control timepicker-input" id="desingTimeTotal">
        </div>

        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control timepicker-input" id="devTimeTotal">
        </div>

        <div class="input-group bootstrap-timepicker timepicker">
            <input type="text" class="form-control timepicker-input" id="totalTimeTotal">
        </div>
    </div>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://jdewit.github.io/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>

    <script>
        $(document).ready(function() {
            $('.timepicker-input').timepicker({
                template: 'dropdown',
                maxHours: 24,
                showSeconds: true,
                showMeridian: false,
                defaultTime: '00:00:00'
            });

            $('.timepicker-input').timepicker().on('changeTime.timepicker', function(e) {
                // Get the parent div id value of closest class name timePickersWrapper
                var id = $(this).closest('.timePickersWrapper').attr("id");

                // retrieve values and convert in seconds
                var desingTime = $("#desingTime"+id).val();
                var desingTimeValues = desingTime.split(":");
                var desingTimeHoursInSeconds = parseInt(desingTimeValues[0]*60*60);
                var desingTimeMinutesInSeconds = parseInt(desingTimeValues[1]*60);
                var desingTimeSeconds = parseInt(desingTimeValues[2]);
                var desingTimeNumberOfSeconds = desingTimeHoursInSeconds+desingTimeMinutesInSeconds+desingTimeSeconds;
                
                var devTime = $("#devTime"+id).val();
                var devTimeValues = devTime.split(":");
                var devTimeHoursInSeconds = parseInt(devTimeValues[0]*60*60);
                var devTimeMinutesInSeconds = parseInt(devTimeValues[1]*60);
                var devTimeSeconds = parseInt(devTimeValues[2]);
                var devTimeNumberOfSeconds = devTimeHoursInSeconds+devTimeMinutesInSeconds+devTimeSeconds;  
                
                // sum
                var totalTime = desingTimeNumberOfSeconds+devTimeNumberOfSeconds;
                
                // convert total of seconds to hh:mm:ss
                var totalTimeConvert = new Date(totalTime * 1000).toISOString().slice(11, 19);

                // apply on totalTime timepicker input
                $('#totalTime'+id).timepicker('setTime', totalTimeConvert);

                // Now calculate the grand totals
                var desingTimeTotal = 0;
                var devTimeTotal = 0;
                var totalTime = 0;
                // design
                $(".designTime").each(function() {
                    desingTime = $(this).val();
                    desingTimeValues = desingTime.split(":");
                    desingTimeHoursInSeconds = parseInt(desingTimeValues[0]*60*60);
                    desingTimeMinutesInSeconds = parseInt(desingTimeValues[1]*60);
                    desingTimeSeconds = parseInt(desingTimeValues[2]);
                    desingTimeNumberOfSeconds = desingTimeHoursInSeconds+desingTimeMinutesInSeconds+desingTimeSeconds;
                    desingTimeTotal = desingTimeTotal+desingTimeNumberOfSeconds;
                });
                var totalDesingTimeConvert = new Date(desingTimeTotal * 1000).toISOString().slice(11, 19);
                $('#desingTimeTotal').timepicker('setTime', totalDesingTimeConvert);
                // dev
                $(".devTime").each(function() {
                    devTime = $(this).val();
                    devTimeValues = devTime.split(":");
                    devTimeHoursInSeconds = parseInt(devTimeValues[0]*60*60);
                    devTimeMinutesInSeconds = parseInt(devTimeValues[1]*60);
                    devTimeSeconds = parseInt(devTimeValues[2]);
                    devTimeNumberOfSeconds = devTimeHoursInSeconds+devTimeMinutesInSeconds+devTimeSeconds;
                    devTimeTotal = devTimeTotal+devTimeNumberOfSeconds;
                });
                var totalDevTimeConvert = new Date(devTimeTotal * 1000).toISOString().slice(11, 19);
                $('#desingTimeTotal').timepicker('setTime', totalDevTimeConvert);
                // grand total
                totalTime = desingTimeTotal+devTimeTotal;
                totalTimeConvert = new Date(totalTime * 1000).toISOString().slice(11, 19);
                $('#totalTimeTotal').timepicker('setTime', totalTimeConvert);
            });
        });
    </script>
</body>
</html>

Really thank you for this code. But after merging your code with mine, I am having an error, saying "Maximum call stack size exceeded". Any suggestion on that? — Hasib Hosen, Aug 10 '22 at 16:02
Also as you shown an example with one timepicker in the code, can you suggest me how I can work with multiple timepicker by passing the i value of the loop? — Hasib Hosen, Aug 10 '22 at 16:02
You could wrap them in some divs and use jQuery to get the value of the ids, i will update my answer. — Michael Tétreault, Aug 11 '22 at 19:23
see my last EDIT, i think it might be what you want to achieve. — Michael Tétreault, Aug 11 '22 at 19:59

How to sum up in bootstrap time picker

1 Answers1