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 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:
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.