📅 最后修改于: 2023-12-03 14:59:33.669000 🧑 作者: Mango
Bootstrap是一个强大的前端框架，它包含了各种有用的组件和工具，其中包括日期选择器组件。这个日期选择器组件被称为“日历”，它是一个非常有用的工具，可以帮助你轻松地处理日期和时间。
要使用Bootstrap日历，你需要在HTML页面中包含Bootstrap框架和日历脚本。这可以通过链接到Bootstrap的CDN（Content Delivery Network）来完成，如下所示：
<head>
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入Bootstrap日期选择器样式表 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
</head>
<body>
<!-- 引入Bootstrap框架库 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入Bootstrap日期选择器脚本 -->
<script src="https://cdn.bootcss.com/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
代码片段中链接到了Bootstrap的CDN，并且包含了Bootstrap的样式表、框架库和日期选择器库。
接下来，你可以在HTML页面中添加一个日期选择器，如下所示：
<div class="input-group date">
<input type="text" class="form-control" id="datepicker">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
这个日期选择器包含了一个输入框和一个图标，当用户单击图标时，日期选择器弹出。
最后，你需要初始化日期选择器，如下所示：
<script>
$(function() {
$('#datepicker').datepicker({
format: "yyyy-mm-dd",
autoclose: true,
todayHighlight: true
});
});
</script>
这会使日期选择器工作，你可以设置格式、自动关闭和今天的高亮显示。
Bootstrap日历是一个强大的工具，可以帮助你轻松地处理日期和时间。通过使用CDN，你可以快速轻松地添加日历到你的HTML页面中。然而，你需要记住初始化日期选择器，并设置正确的选项，以确保它正常工作。