bootstrap-datepicker限定可选时间范围

一、应用场景

实际应用中可能会根据日期字段查询某个日期范围内的数据，则需要对日期选择器可选时间进行限制，

如：开始时间不能大于结束时间，结束时间不能小于开始时间，此时就要为开始日期选择器和结束日期选择器动态的设置startDate和endDate的值。

二、相关知识点

1、bootstrap-datepicker的初始化

引入bootstrap-datepicker.js和bootstrap-datepicker.css

bootstrap-datepicker配置参数的了解

2、boostrap-datepicker的changeDate事件：日期改变时触发

3、bootstrap-datepicker的setEndDate和setStartDate方法

4、详细配置参见官方文档http://bootstrap-datepicker.readthedocs.org/en/latest/methods.html

三、应用实例

1、JSP中，声明日期选择器

[html]  view plain  copy

 

1. <span style="font-size:14px;"><div class="col-md-6 cy-text-right-md">  
2.     <div class="form-inline">  
3.         <div class="form-group cy-mar-ver-s">  
4.             <span class="cy-pad-hor-s">最后接入时间</span>  
5.         </div>  
6.         <div class="input-daterange input-group" id="datepicker">  
7.             <input type="text" class="form-control" name="start" id="qBeginTime" />  
8.             <span class="input-group-addon">至</span>  
9.             <input type="text" class="form-control" name="end" id="qEndTime" />  
10.         </div>  
11.         <div class="form-group cy-mar-ver-s">  
12.             <button class="btn btn-primary cy-pad-rgt-s" onclick="javascript:doQuery();" type="button">搜索</button>  
13.         </div>  
14.     </div>  
15. </div></span>  

2、JS中，对日期选择器进行初始化和配置

[javascript]  view plain  copy

 

1.              <span style="font-size:14px;"> //开始时间：  
2. $('#qBeginTime').datepicker({  
3.     todayBtn : "linked",  
4.     autoclose : true,  
5.     todayHighlight : true,  
6.     endDate : new Date()  
7. }).on('changeDate',function(e){  
8.     var startTime = e.date;  
9.     $('#qEndTime').datepicker('setStartDate',startTime);  
10. });  
11. //结束时间：  
12. $('#qEndTime').datepicker({  
13.     todayBtn : "linked",  
14.     autoclose : true,  
15.     todayHighlight : true,  
16.     endDate : new Date()  
17. }).on('changeDate',function(e){  
18.     var endTime = e.date;  
19.     $('#qBeginTime').datepicker('setEndDate',endTime);  
20. });</span>  

3、效果图