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

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 datetime" data-date-format="'+format+'">';
function add(format){
$('.time_chose').app(str)
}

7js选择分歧周期时，设定分歧的日期控件参数值， <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){
【datetimepicker按日月小时不同周期多个日期查询】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启动代码。日期选择结果如下

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

猜你喜欢