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

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

方式/步调

1
头部 head 引入css文件：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="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="#">按月</a></li>
<li><a href="#">按日</a></li>
<li><a href="#">按小时</a></li>
</ul>
</div>
3
css样式编写：
<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://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
5
周期选择jQuery方式：
$('.dropdown-menu').on('click','li',function(){
var wrd=$(this).children('a').text();
$(this).parents('.btn-group').find('.chose').text(wrd);
})
6
先编写一个动态日期input选择框，将其data-date-format属性设置为动态‘format’字段，并将整个部门界说名称为‘str’，界说方式添加查询日期标签 add(format)：
var str='<input type="text" readonly class="form_datetime form-control datetimeStart" data-date-format="'+format+'">'+
'<span> 至 </span>'+
'<input type="text" readonly class="form_datetime form-control datetimeEnd" data-date-format="'+format+'">';
function add(format){
$('.time_chose').append(str)
}
7
js选择分歧周期时，设心猿意马分歧的日期控件参数值，<div class="time_chose">内添加分歧的日期选择控件标签：
$('#time_way').on('click','li',function(){
_index=$(this).index();
$('.time_chose').html('')
if(_index == 0){
minView=3; //3 选择月
format ='yyyy-mm';
startView=3;
$('body').find('.datetimepicker').find('div').hide();
$('body').find('.datetimepicker-months').show();
}else if(_index==1){
minView=2; //2 选择日
format ='yyyy-mm-dd';
startView=2;
$('body').find('.datetimepicker').find('div').hide();
$('body').find('.datetimepicker-days').show();
}else if(_index==2){
minView=1; //1 选择小不时
startView=1;
format ='yyyy-mm-dd hh:ii';
$('body').find('.datetimepicker').find('div').hide();
$('body').find('.datetimepicker-hours').show();
}
console.log(format)
add(format); //添加日期组件
$(".form-control").datetimepicker({
format:format, // 揭示格局
autoclose:true, // 选择日期后封闭
startView:startView, //日期时候选择器打开之后起首显示的视图 0-时 1-日 2-月 3-年
minView:minView, //最精准的时候选择为日期 0-分 1-时 2-日 3-月
language:'zh-CN', //显示说话为中文
});
})
8
启动代码。日期选择结果如下
9