datetimepicker按日月小时不同周期多个日期查询 _小知识

楼本家儿在写后台办理项目是碰到一个日期查询新需求，具体是如许的：有三个分歧的周期（小时、日、月），按照分歧的周期显示分歧的日期查询样式；说真话刚拿到这个需求有点懵。。。不外转化一下思维发现仍是很好理解的。我们可以将选择日期的 input标签按照周期分歧动态添加，并设定分歧的data-date-format 属性。看下结果图

文章插图
方式/
1头部 head 引入css文件：
<link href=https://vvvtt.com/article/"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href=https://vvvtt.com/article/"https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

文章插图

2页面div添加设定周期部门，这里设置‘小时、日、月’三种周期，并添加默认的日期input框：
<span>设定周期</span>
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="chose">选择设定周期类型</span>
<i class="caret"></i>
</button>
<ul class="dropdown-menu" id="time_way">
<li><a href=https://vvvtt.com/article/"#">按月
<li><a href=https://vvvtt.com/article/"#">按日
<li><a href=https://vvvtt.com/article/"#">按小时
</ul>
</div>

文章插图

3css样式编写：
<style>
.page {
border: 1px solid #eee;
padding: 20px 10px;
margin-top: 20px;
box-shadow: 0 1px 3px #eee;
}
.top {
display:flex;
width: 100%;
height: auto;
margin: 6px 0;
font-size: 12px;
font-weight: bold;
color: #333;
}
.top .cell {
margin-right: 10px;
height: 34px;
line-height: 34px;
float: left;
}
.top .cell span {
margin: 0 4px;
float: left;
}
.btn-group{float: left;margin-right: 6px;}
.top .cell input {
float: left;
display: inline !important;
width: 200px !important;
background: #fff;
}
.total {
height: 30px;
line-height: 30px;
font-size: 12px;
color: #333;
}
.table-responsive {
width: 100%;
}
.table {
border: 1px solid #eee;
box-shadow: 0 1px 3px #eee;
}
.btn-group, .btn-group-vertical{
vertical-align:top;
}
.btn-group-sm>.btn, .btn-sm{
padding: 7px 10px !important;
}
.time_chose{
float: left;
}
</style>

文章插图

4底部js文件引入，楼本家儿这里用到了中文样式（bootstrap-datetimepicker.zh-CN.js），也可以不引入默认为英文样式：
<script src=https://vvvtt.com/article/"https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js">