双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件，可以设定多个时间段选项，也可以自定义时间段，由用户自己选择起始时间和终止时间，时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1，所以我把daterangepicker与Bootstrap-2.3.1进行了整合。
$('#reportrange').daterangepicker(
{
// startDate: moment().startOf('day'),//endDate: moment(),//minDate: '01/01/2012',//最小时间
maxDate : moment(),//最大时间
dateLimit : {
days : 30
},//起止时间的最大间隔
showDropdowns : true,showWeekNumbers : false,//是否<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>第几周
timePicker : true,//是否<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>小时和分钟
timePickerIncrement : 60,//时间的增量，单位为分钟
timePicker12Hour : false,//是否使用12小时制来<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>时间
ranges : {
//'最近1小时': [moment().subtract('hours',1),moment()],'今日': [moment().startOf('day'),'昨日': [moment().subtract('days',1).startOf('day'),moment().subtract('days',1).endOf('day')],'最近7日': [moment().subtract('days',6),'最近30日': [moment().subtract('days',29),moment()]
},opens : 'right',//日期选择框的弹出位置
buttonClasses : [ 'btn btn-default' ],applyClass : 'btn-small btn-primary blue',cancelClass : 'btn-small',format : 'YYYY-MM-DD HH:mm:ss',//控件中from和to <a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>的日期格式
separator : ' to ',locale : {
applyLabel : '确定',cancelLabel : '取消',fromLabel : '起始时间',toLabel : '结束时间',customRangeLabel : '<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>',daysOfWeek : [ '日','一','二','三','四','五','六' ],monthNames : [ '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月' ],firstDay : 1
}
},function(start,end,label) {//格式化日期<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>框
$('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
});
//设置日期<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>被选项 --开始--
/*
var dateOption ;
if("${riqi}"=='day') {
dateOption = "今日";
}else if("${riqi}"=='yday') {
dateOption = "昨日";
}else if("${riqi}"=='week'){
dateOption ="最近7日";
}else if("${riqi}"=='month'){
dateOption ="最近30日";
}else if("${riqi}"=='year'){
dateOption ="最近一年";
}else{
dateOption = "<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>";
}
$(".daterangepicker").find("li").each(function (){
if($(this).hasClass("active")){
$(this).removeClass("active");
}
if(dateOption==$(this).html()){
$(this).addClass("active");
}
});*/
//设置日期<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>被选项 --结束--
}) 