skip to Main Content

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


  1. Chosen as BEST ANSWER

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


  2. 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>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search