文章目录
【Bootstrap】Bootstrap添加时间选择器组件datetimepicker一、引入bootstrap基础库二、引入bootstrap-datetimepicker库三、使用方法四、一些问题【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库
官网地址：/p/bootstrap-datetimepicker/index.htm
github：/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样式：
故参考/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;*/}
修改后效果预览：
