Need assistance with validating the start time and end time input values to ensure they fall within a specified range. Everything works fine when both times are on the same day, but encounters issues when the end date is different. I've searched through numerous StackOverflow posts without finding a solution.
How to check if one DateTime is later than another in JavaScript
Comparing two time strings in HH:MM:SS format
Check if one DateTime is later than another in JavaScript https://i.sstatic.net/RKET8.png
<html>
<script language="javascript">
jQuery(document).on('change',".timepicker",function(){
var selectedTime = new Date("November 13, 2018 " + jQuery(this).val());
var startLimit = new Date("November 13, 2018 " + jQuery(this).data('starttime'));
var endLimit = new Date("November 13, 2018 " + jQuery(this).data('endtime'));
var start_time_val = new Date("November 13, 2018 " + $("input[name=start_time]").val());
var end_time_val = new Date("November 13, 2018 " + $("input[name=end_time]").val());
var elementName = jQuery(this).attr('name');
var valid = moment(jQuery(this).val(), "H:mm a", true).isValid();
var time = new Date("November 13, 2018 " + selectedTime);
jQuery(this).next('span.error').text('');
var error_msg = jQuery(this).data('erro_msg');
if(valid){
if(elementName == 'start_time'){
if(selectedTime >= startLimit && endLimit > selectedTime){
console.log("selected Time less than start limit");
}else{
console.log("selected Time is less than start limit");
jQuery(this).next('span.error').text(error_msg);
}
var endTimeSelected = jQuery(this).next('input').val();
}else if(elementName == 'end_time'){
if(selectedTime >= startLimit && endLimit > selectedTime){
}else{
jQuery(this).next('span.error').text(error_msg);
}
var endTimeSelected = jQuery(this).next('input').val();
}else if(elementName == 'end_time'){
if(selectedTime <= endLimit && selectedTime <= endLimit){
}
else{
jQuery(this).next('span.error').text(error_msg);
}
var startTimeSelected = jQuery(this).prev('input.timepicker').val();
}
}else{
jQuery(this).next('span.error').text(error_msg);
}
});
</script>
<input type="text" name="start_time" value="6:15 AM" class="form-control timepicker" autocomplete="off" requried="1" data-starttime="6:00 AM" data-endtime="12:00 PM" data-erro_msg="Please select time between 6:00 AM-12:00 PM">
<input type="text" name="end_time" value="7:15 AM" class="form-control timepicker" autocomplete="off" requried="1" data-starttime="6:00 AM" data-endtime="12:00 PM" data-erro_msg="Please select time between 6:00 AM-12:00 PM">
</html>