---

【Bootstrap】Bootstrap添加时间选择器组件datetimepicker

---

一、引入bootstrap基础库

css引入：

<link rel="stylesheet" href="../css/bootstrap.min.css">

js引入：

<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>

二、引入bootstrap-datetimepicker库

官网地址：https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
github：https://github.com/smalot/bootstrap-datetimepicker

css引入：

<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">

js引入（时间插件主体+中文包）：

<script src="../js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script src="../js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

注意：需要按照jQuery–>基础库–>datetime库顺序添加

三、使用方法

html中添加input标签，id命名为datetimepicker：

<div class="input-group">
	<span class="input-group-text">选择日期</span>
	<input class="form-control" type="text"  id="datetimepicker" aria-label="选择日期">
</div>

js中找到该id对应的元素，进行设置，具体参数参考官网：

$('#datetimepicker').datetimepicker({
    language: 'zh-CN', // 中文语言包
    autoclose: 1, // 选中日期后自动关闭
    format: 'yyyy-mm-dd', // 日期格式
    minView: "month", // 最小日期显示单元，这里最小显示月份界面，即可以选择到日
    todayBtn: 1, // 显示今天按钮
    todayHighlight: 1, // 显示今天高亮
  });

效果预览：

四、一些问题

遇到了左右箭头不显示的问题，发现其用的是glyphicon-arrow-left样式：

故参考https://blog.csdn.net/tang05709/article/details/115613265在bootstrap-datetimepicker.css最后添加了几行代码，并更换了引入的css文件bootstrap-datetimepicker.css：

<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">

.icon-arrow-left,
.glyphicon-arrow-left {
  position: relative;
}
.icon-arrow-left::after,
.glyphicon-arrow-left::after {
  /*position: absolute;*/
  /*top: 1px;*/
  /*left: 1px;*/
  /*width: 15px;*/
  /*height: 15px;*/
  content: "<";
  /*display: block;*/
}
.icon-arrow-right,
.glyphicon-arrow-right {
  position: relative;
}
.icon-arrow-right::after,
.glyphicon-arrow-right::after {
  /*position: absolute;*/
  /*top: 1px;*/
  /*left: 1px;*/
  /*width: 15px;*/
  /*height: 15px;*/
  content: ">";
  /*display: block;*/
}

修改后效果预览：