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

← prev next →