How to check time overlap in bootstrap date - php

Question

I want to check shift start time and shift time values overlapped or not. if user enter overlapped values it should prompt error. please advice
<div class="form-group">
<label for="">Shift Start:</label>
<div class='input-group date' id='datetimepicker3'>
<input type='text' name="shift_start" class="form-control"
id='datetimepicker3' value="{{old('shift_start')}}" /> <span
class="input-group-addon"> <span
class="glyphicon glyphicon-time"></span>
</span>
</div>
<div class="form-group">
<label for="">Shift End:</label>
<div class='input-group date' id='datetimepicker5'>
<input type='text' name="shift_end" class="form-control"
value="{{old('shift_end')}}" /> <span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
this is my script
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm'
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm'
});
});

Answer 1

Create a javascript function :
function checkTime()
{
var start = $('#datetimepicker3').val();
var end = $('#datetimepicker5').val();
var tabStart = start.split(':');
var tabEnd = end.split(':');
var dateStart = new Date();
dateStart.setHours(parseInt(tabStart[0]));
dateStart.setMinutes(parseInt(tabStart[1]));
var dateEnd = new Date();
dateEnd.setHours(parseInt(tabEnd[0]));
dateEnd.setMinutes(parseInt(tabEnd[1]));
if(dateStart < dateEnd)
{
alert('ok');
}
else
{
alert('ko');
}
}
Then in you datetimepicker :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
$('#datetimepicker5').datetimepicker({
format: 'HH:mm',
onSelect: function(){
checkTime();
}
});
});