双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件，可以设定多个时间段选项，也可以自定义时间段，由用户自己选择起始时间和终止时间，时间段的最大跨度可以在程序里设定。我们项目里用到的Bootstrap版本是2.3.1，所以我把daterangepicker与Bootstrap-2.3.1进行了整合。
一、需要引入的css与js
[java]view plaincopy<linkhref="bootstrap.min.css"rel="stylesheet"> <linkrel="stylesheet"type="text/css"media="all"href="daterangepicker-bs3.css"/> <linkrel="stylesheet"type="text/css"media="all"href="daterangepicker-1.3.7.css"/> <linkhref="font-awesome-4.1.0/css/font-awesome.min.css"rel="stylesheet"> <scripttype="text/javascript"src="jquery-1.10.1.min.js"></script> <scripttype="text/javascript"src="bootstrap.min.js"></script> <scripttype="text/javascript"src="moment.js"></script> <scripttype="text/javascript"src="daterangepicker-1.3.7.js"></script>
二、html部分代码 [html]view plaincopy<divclass="page-content"> <!--BEGINPAGECONTAINER--> <divclass="container-fluid"> <divclass="row-fluid"style="margin-top:5px"> <divclass="span4"> <divclass="control-group"> <labelclass="control-label"> 日期： </label> <divclass="controls"> <divid="reportrange"class="pull-leftdateRange"style="width:350px"> <iclass="glyphiconglyphicon-calendarfafa-calendar"></i> <spanid="searchDateRange"></span> <bclass="caret"></b> </div> </div> </div> </div> </div> </div> 三、使用js调用daterangepicker
[javascript]view plaincopy<prename="code"class="html"><prename="code"class="javascript"><scripttype="text/javascript"> $(document).ready(function(){ //时间插件 $('#reportrangespan').html(moment().subtract('hours',1).format('YYYY-MM-DDHH:mm:ss')+'-'+moment().format('YYYY-MM-DDHH:mm:ss')); $('#reportrange').daterangepicker( { //startDate:moment().startOf('day'), //endDate:moment(), //minDate:'01/01/',//最小时间 maxDate:moment(),//最大时间 dateLimit:{ days:30 },//起止时间的最大间隔 showDropdowns:true, showWeekNumbers:false,//是否显示第几周 timePicker:true,//是否显示小时和分钟 timePickerIncrement:60,//时间的增量，单位为分钟 timePicker12Hour:false,//是否使用12小时制来显示时间 ranges:{ //'最近1小时':[moment().subtract('hours',1),moment()], '今日':[moment().startOf('day'),moment()], '昨日':[moment().subtract('days',1).startOf('day'),moment().subtract('days',1).endOf('day')], '最近7日':[moment().subtract('days',6),moment()], '最近30日':[moment().subtract('days',29),moment()] }, opens:'right',//日期选择框的弹出位置 buttonClasses:['btnbtn-default'], applyClass:'btn-smallbtn-primaryblue', cancelClass:'btn-small', format:'YYYY-MM-DDHH:mm:ss',//控件中from和to显示的日期格式 separator:'to', locale:{ applyLabel:'确定', cancelLabel:'取消', fromLabel:'起始时间', toLabel:'结束时间', customRangeLabel:'自定义', daysOfWeek:['日','一','二','三','四','五','六'], monthNames:['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], firstDay:1 } },function(start,end,label){//格式化日期显示框 $('#reportrangespan').html(start.format('YYYY-MM-DDHH:mm:ss')+'-'+end.format('YYYY-MM-DDHH:mm:ss')); }); //设置日期菜单被选项--开始-- /* vardateOption; if("${riqi}"=='day'){dateOption="今日"; }elseif("${riqi}"=='yday'){dateOption="昨日"; }elseif("${riqi}"=='week'){dateOption="最近7日"; }elseif("${riqi}"=='month'){dateOption="最近30日"; }elseif("${riqi}"=='year'){dateOption="最近一年"; }else{dateOption="自定义"; } $(".daterangepicker").find("li").each(function(){if($(this).hasClass("active")){$(this).removeClass("active"); } if(dateOption==$(this).html()){$(this).addClass("active"); } });*/ //设置日期菜单被选项--结束-- }) </script>
四、效果图
