"Time picker"
Bootstrap 4.0.0 Snippet by feminalbert

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$('.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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
Fast Selection Date Picker
Bootstrap Icon Picker

Questions / Comments: