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