Bootstrap 选择器

Bootstrap Datepicker

Bootstrap Datepicker用于显示带有日期，月份和时间的日历。

您可以使用以下代码在 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用于显示以分钟或秒为单位的时间。

示例:

<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中，有以下两种显示日期时间选择器的方法-

方法1: 不使用日历和时间图标

您可以按照下面的代码可显示日期和时间，而无需使用日期和时间图标。

<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

方法2: 使用日期和时间图标

添加图标可使您的选择器更加美观。您可以使用以下代码在选择器上添加日期和时间图标。

代码:

<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>

Bootstrap 进度条

Bootstrap 间距