daterangepicker的使用

引入js和css:

<script type="text/javascript" src="${staticPath }/static/AdminLTE-2.4.2/bower_components/moment/moment.js"></script> 
<link rel="stylesheet" href="${staticPath }/static/AdminLTE-2.4.2/bower_components/bootstrap-daterangepicker/daterangepicker.css" type="text/css">
<script type="text/javascript" src="${staticPath }/static/AdminLTE-2.4.2/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

jsp:

 <div class="form-group">
                  <label>请假时间区间：</label>
				 <input type="text" name="date2" id="date2" class="form-control" >  
                 <input type="hidden" id = "startTime" name="startTime" class="form-control" />  
                 <input type="hidden" id = "endTime" name="endTime" class="form-control" />
                </div>

js:

//区间时间插件  
     $("input[name='date2']").daterangepicker(  
            {  
            	timePicker: true, 
            	timePickerIncrement: 30, 
            	format: 'YYYY-MM-DD hh:mm:ss',
               // autoApply: true,  
               autoUpdateInput: false,  
               // alwaysShowCalendars: true,  
               ranges: {  
                   '今天': [moment(),moment()],  
                   '明天': [moment().subtract(-1, 'days'),moment().subtract(-1, 'days')],  
                   '明后三天': [moment().subtract(-1, 'days'), moment().subtract(-3, 'days')],  
                   '明后一周': [moment().subtract(-1, 'days'), moment().subtract(-7, 'days')] /* ,  
                   '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]   */ 
               },  
               locale: {  
                   format: "YYYY-MM-DD hh:mm:ss",  
                   separator: " - ",  
                   applyLabel: "确认",  
                   cancelLabel: "清空",  
                   fromLabel: "开始时间",  
                   toLabel: "结束时间",  
                   customRangeLabel: "自定义",  
                   daysOfWeek: ["日","一","二","三","四","五","六"],  
                   monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]  
               }  
            }  
    ).on('cancel.daterangepicker', function(ev, picker) {  
        $("#date2").val("请选择日期范围");  
        $("#startTime").val("");  
        $("#endTime").val("");  
    }).on('apply.daterangepicker', function(ev, picker) {  
        $("#startTime").val(picker.startDate.format('YYYY-MM-DD hh:mm:ss'));  
        $("#endTime").val(picker.endDate.format('YYYY-MM-DD hh:mm:ss'));  
        $("#date2").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));   
});  

效果：