Bootstrap picker

Bootstrap Datepicker

Bootstrap Datepicker is used to display a calendar with date, month, and time.

You can use the below code to create a datepicker in Bootstrap.

  <!DOCTYPE html>  <html lang = “en”>  <head>    <meta charset = “UTF-8”>    <meta name = “viewport” content = “width=device-width, initial-scale=1.0”>    <link rel = “stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>    <title>Bootstrap DatePicker</title>  </head>    <body>      <h1 align = “center”>Bootstrap datepicker</h1>      <div class = “container”>          <div class = “row”>            <div class = “col-sm-12” align = “center”>              <input type = “date” name = “date”>            </div>                      </div>        </div>    <script src = “https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>    <script src =”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>  </body>  </html>  

Bootstrap Timepicker

Bootstrap timepicker is used to display the time in minutes or seconds.

Example:

  <html>  <head>  <title>Bootstrap date and time</title>  <script src = “https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>  <script src = “https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js”></script>  <script src = “https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>  <script src = “https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js”></script>  <script>  $(function() {    $(‘#datetimepicker1′).datetimepicker();  });  </script>  <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>  <link rel = “stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css”>  <style>      .container {          margin-top : 5px;          margin-left : 10px;          width : 600px;      }  </style>  </head>  <body>  </br>  <div class =”container”>      <div class =”row”>         <div class =’col-sm-6’>            <div class =”form-group”>               <div class = ‘input-group date’ id=’datetimepicker3′>                  <input type = ‘text’ class=”form-control” />                  <span class = “input-group-addon”>                  <span class = “glyphicon glyphicon-time”></span>                  </span>               </div>            </div>         </div>         <script type = “text/javascript”>            $(function () {                $(‘#datetimepicker3’).datetimepicker({                    format: ‘LT’                });            });         </script>      </div>   </div>     </body>  </html>  

Bootstrap datetime picker

Bootstrap Datetime picker is an input field that is used to display a calendar with the time.

In Bootstrap, there are the following two methods to display datetime picker –

Method 1: Without using calendar and time icon

You can follow the below code to display date and time without using the date and time icon.

  <html>  <head>  <title>Bootstrap date and time</title>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js”></script>  <script>  $(function() {    $(‘#datetimepicker1’).datetimepicker();  });  </script>  <link rel =”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>  <link rel =”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css”>  <style>      .container {          margin-top: 5px;          margin-left: 10px;          width: 600px;      }  </style>  </head>  <body>      <div class = “container”>          <div class = “row”>             <div class = ‘col-sm-6’>                <input type = ‘text’ class = “form-control” id = ‘datetimepicker1’ />             </div>             <script type = “text/javascript”>                $(function () {                    $(‘#datetimepicker4’).datetimepicker();                });             </script>          </div>       </div>            </body>  </html  

Method 2: Using date and time icon

Adding icons makes your picker more attractive and beautiful. You can use the below code to add date and time icon on your picker.

Code:

  <html>  <head>  <title>Bootstrap date and time</title>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js”></script>  <script src =”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js”></script>  <script>  $(function() {    $(‘#datetimepicker1′).datetimepicker();  });  </script>  <link rel =”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css”>  <link rel =”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css”>  <style>      .container {          margin-top: 5px;          margin-left: 10px;          width: 600px;      }  </style>  </head>  <body>  </br>  <div class =”container”>    <div class =”row”>      <div class =’col-sm-6′>        <div class =”form-group”>          <div class =’input-group date’ id=’datetimepicker1′>            <input type =’text’ class=”form-control” />            <span class =”input-group-addon”>              <span class =”glyphicon glyphicon-calendar”></span>            </span>          </div>        </div>      </div>    </div>  </div>  </body>  </html>  

Next TopicAdd to cart button in Bootstrap

Bootstrap Picker, Datepicker, Timepicker, Datetime Picker

Bootstrap picker

Bootstrap Datepicker

Bootstrap Timepicker

Bootstrap datetime picker

Bootstrap 4 Textarea

Bootstrap Popover

You may also like