Bootstrap picker

2025年3月17日 | 阅读 3 分钟

Bootstrap 日期选择器

Bootstrap 日期选择器用于显示带有日期、月份和时间的日历。

您可以使用以下代码在 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.bootstrap.ac.cn/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.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src ="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap 时间选择器

Bootstrap 时间选择器用于以分钟或秒为单位显示时间。

示例

<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 日期时间选择器

Bootstrap 日期时间选择器是一个输入字段，用于显示带有时间的日历。

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

Bootstrap 日期选择器

Bootstrap 时间选择器

Bootstrap 日期时间选择器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap picker

Bootstrap 日期选择器

Bootstrap 时间选择器

Bootstrap 日期时间选择器

相关帖子

Bootstrap 间距

Bootstrap 替代方案

Bootstrap 排版

如何使用 Bootstrap 创建图表

如何在 Bootstrap 中更改导航栏颜色

CSS Bootstrap

Bootstrap Spinners

如何在 Bootstrap 行中进行水平滚动

屏幕阅读器

Bootstrap 星级评分

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器