I have the following piece of code in my front end. I couldn’t get the timepicker to show up. Any help please?
<!DOCTYPE HTML>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<script type="text/javascript">
$(() => {
$('#timepicker1').timepicker();
});
</script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</body>
<html>
I have all the required source files in my the correct path as mentioned in the code above. Also, I am not seeing any errors in the browser logs. Please help me fix this.
Thank you all
EDIT: I have now used the direct cdn links for all the source files as provided in jsfiddle.
2
Answers
rel="stylesheet" was missing in one of the css tags. That was the issue.
To use the time picker on bootstrap. You must use the datetimepicker component. And use the format property to allow only hours and minutes to be captured