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