Multiple TimePicker: select chronological time range

Multiple TimePicker: select chronological time range

I use the UI Timepicker jquery and I would like to select chronological
time range between timepickers. It works between 2 timepickers but in my
case I will have more (example: 3).
I would like to have the chronological time range between all of them.
For example:
Start1: 8:00 End1: 10:00 (start1 have all the time available, end1 have
time available from 8am)
Start2: 10:00 End2: 18:00 (start2 have time available between end1 and
end2, end2 have time available between start2 and start3)
Start3: 18:00 End3: 20:00 (start3 have time available between end2 and
end3, end3 have time available at start3).
So far my code only work for two timepickers and I can't find the way to
do like what I want. Here is my code:
<script type='text/javascript'>
<?php for ($i = 1; $i <= 3; $i++) { ?>
$(document).ready(function () {
$('.timepicker_start<?php echo $i ?>').timepicker({
showLeadingZero: false,
onHourShow: tpStartOnHourShowCallback<?php echo $i ?>,
onMinuteShow: tpStartOnMinuteShowCallback<?php echo $i ?>
});
});
$(document).ready(function () {
$('.timepicker_end<?php echo $i ?>').timepicker({
showLeadingZero: false,
onHourShow: tpEndOnHourShowCallback<?php echo $i ?>,
onMinuteShow: tpEndOnMinuteShowCallback<?php echo $i ?>
});
});
function tpStartOnHourShowCallback<?php echo $i ?>(hour) {
var tpEndHour = $('.timepicker_end<?php echo $i
?>').timepicker('getHour');
if ($('.timepicker_end<?php echo $i ?>').val() == '') { return true; }
if (hour <= tpEndHour) { return true; }
return false;
}
function tpStartOnMinuteShowCallback<?php echo $i ?>(hour, minute) {
var tpEndHour = $('.timepicker_end<?php echo $i
?>').timepicker('getHour');
var tpEndMinute = $('.timepicker_end<?php echo $i
?>').timepicker('getMinute');
if ($('.timepicker_end<?php echo $i ?>').val() == '') { return true; }
if (hour < tpEndHour) { return true; }
if ( (hour == tpEndHour) && (minute < tpEndMinute) ) { return true; }
return false;
}
function tpEndOnHourShowCallback<?php echo $i ?>(hour) {
var tpStartHour = $('.timepicker_start<?php echo $i
?>').timepicker('getHour');
if ($('.timepicker_start<?php echo $i ?>').val() == '') { return true; }
if (hour >= tpStartHour) { return true; }
return false;
}
function tpEndOnMinuteShowCallback<?php echo $i ?>(hour, minute) {
var tpStartHour = $('.timepicker_start<?php echo $i
?>').timepicker('getHour');
var tpStartMinute = $('.timepicker_start<?php echo $i
?>').timepicker('getMinute');
if ($('.timepicker_start<?php echo $i ?>').val() == '') { return true; }
if (hour > tpStartHour) { return true; }
if ( (hour == tpStartHour) && (minute > tpStartMinute) ) { return true; }
return false;
}
<?php } ?>
</script>
<?php for ($i = 1; $i <= 3; $i++) { ?>
<input type='text' class='timepicker_start<?php echo $i ?>'/>
<input type='text' class='timepicker_end<?php echo $i ?>'/>
<?php } ?>
Thanks