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中，聲明日期選擇器

 

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" οnclick="javascript:doQuery();" type="button">搜索</button>
13. </div>
14. </div>
15. </div></span>

 

 

 

 

2、JS中，對日期選擇器進行初始化和配置

 

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>