How to Add Bootstrap Time Picker

Adding the Dependencies

Note: Bootstrap, jQuery and Time Picker plugin are included in the downloadable of this tutorial. First, we need to include the CSS and JS depencies to our app. For CSS Place the below codes in the header section of the page you want the timepicker to appear.
  1. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  2. <link rel="stylesheet" type="text/css" href="assets/timepicker.css">
For JS Place the below codes in either the header or before closing body section of the page you want the timepicker to appear.
  1. <script src="assets/jquery.min.js"></script>
  2. <script src="bootstrap/js/bootstrap.min.js"></script>
  3. <script src="assets/timepicker.js"></script>

Creating our Input

Next, we create the input where we want the timepicker to appear.
  1. <div class="bootstrap-timepicker">
  2. <div class="form-group">
  3. <label>Time picker:</label>
  4.  
  5. <div class="input-group input-group-lg">
  6. <input type="text" class="form-control timepicker">
  7.  
  8. <div class="input-group-addon">
  9. <span class="glyphicon glyphicon-time"></span>
  10. </div>
  11. </div>
  12. </div>
  13. </div>

Initializing our Timepicker

Lastly, we initialize our timepicker using jQuery.
  1. $(function(){
  2. $('.timepicker').timepicker({
  3. showInputs: false
  4. })
  5. });

Full HTML

Here's the full html that you can use.
  1. <!DOCTYPE html>
  2. <meta charset="utf-8">
  3. <title>How to Add Bootstrap Time Picker</title>
  4. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  5. <link rel="stylesheet" type="text/css" href="assets/timepicker.css">
  6. </head>
  7. <div class="container">
  8. <h1 class="page-header text-center">Add Bootstrap Time Picker</h1>
  9. <div class="row">
  10. <div class="col-sm-4 col-sm-offset-4">
  11. <div class="bootstrap-timepicker">
  12. <div class="form-group">
  13. <label>Time picker:</label>
  14.  
  15. <div class="input-group input-group-lg">
  16. <input type="text" class="form-control timepicker">
  17.  
  18. <div class="input-group-addon">
  19. <span class="glyphicon glyphicon-time"></span>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27.  
  28. <script src="assets/jquery.min.js"></script>
  29. <script src="bootstrap/js/bootstrap.min.js"></script>
  30. <script src="assets/timepicker.js"></script>
  31. $(function(){
  32. $('.timepicker').timepicker({
  33. showInputs: false
  34. })
  35. });
  36. </body>
  37. </html>
That ends this tutorial. Happy Coding :)

Comments

Submitted byDonta7481 (not verified)on Thu, 03/28/2019 - 00:17

Is there a way to display the time retrieved from a database with this timepicker? I am using an asp textbox to display the time.
Submitted byravina (not verified)on Wed, 07/15/2020 - 21:53

how to validate from time will less then to time in case use 2 time picker

Add new comment