Bootstrap timepicker not appearing

Question

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.

No luck :(. I tried to use the cdn links for all the source files. Still I couldn't get the hand icon when I hover on the time icon. — SamT, Feb 18 '17 at 23:33
Just for future reference for anybody looking here, the issue was I didn't include rel="stylesheet" in one of the css tags. It worked fine after adding that. — SamT, Feb 21 '17 at 01:14

score 0 · Answer 1 · answered Feb 18 '17 at 23:49

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

<!DOCTYPE HTML>
<html>
<head>
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script>
    <script src="bootstrap-3.3.7/js/moment.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script>
    <script src="bootstrap-3.3.7/js/transition.js"></script>
    <script src="bootstrap-3.3.7/js/collapse.js"></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>

    <script type="text/javascript">
    $(function () {
        $('#timepicker1').datetimepicker({
             format: 'HH:mm'
        });

    });
    </script>
</body>
<html>

Thanks for replying. Actually the jsfiddle given by @Scovetta above does work. Its not bringing up the timepicker in my code. I am not sure if I am adding the source files in correct order. — SamT, Feb 19 '17 at 00:03
It worked :). I found that in one of the css files i didn't include rel="stylesheet". I tried after adding that. It worked thankfully :). I didn't know that attribute is that crucial to have. One more learning. Thanks for helping me with this Scovetta and others who had a look. — SamT, Feb 21 '17 at 01:13

score 0 · Accepted Answer · answered Feb 21 '17 at 01:16

0

rel="stylesheet" was missing in one of the css tags. That was the issue.

answered Feb 21 '17 at 01:16

SamT

165
1
2
11

Bootstrap timepicker not appearing

2 Answers2