<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <div class="form-group bootstrap-timepicker"> <label class="control-label">Start Time</label> <input id="start" name="start" ng-model="start" type="text" required="required" class="form-control start" /> </div> </div> <div class="col-md-6"> <div class="form-group bootstrap-timepicker"> <label class="control-label">End Time</label> <input id="end" name="end" ng-model="end" type="text" required="required" class="form-control end" /> </div> </div> </div> </div>

$('.start, .end').timepicker({ showInputs: false, minuteStep: 1, }); $( "#end, #start" ).change(function() { var time = $("#start").val(); var hours = Number(time.match(/^(\d+)/)[1]); var minutes = Number(time.match(/:(\d+)/)[1]); var AMPM = time.match(/\s(.*)$/)[1]; if(AMPM == "PM" && hours<12) hours = hours+12; if(AMPM == "AM" && hours==12) hours = hours-12; var sHours = hours.toString(); var sMinutes = minutes.toString(); if(hours<10) sHours = "0" + sHours; if(minutes<10) sMinutes = "0" + sMinutes; var time2 = $("#end").val(); if(time2=="") { var time2 = "00:00 AM"; } var hours2 = Number(time2.match(/^(\d+)/)[1]); var minutes2 = Number(time2.match(/:(\d+)/)[1]); var AMPM2 = time2.match(/\s(.*)$/)[1]; if(AMPM2 == "PM" && hours2<12) hours2 = hours2+12; if(AMPM2 == "AM" && hours2==12) hours2 = hours2-12; var sHours2 = hours2.toString(); var sMinutes2 = minutes2.toString(); if(hours2<10) sHours2 = "0" + sHours2; if(minutes2<10) sMinutes2 = "0" + sMinutes2; //alert(sHours + ":" + sMinutes); var comparehour = sHours2-sHours; var comparemin = sMinutes2-sMinutes; if(comparehour<0) { $("#end").val(time); } else if((comparehour==0) && (comparemin<0)) { $("#end").val(time); } });