bootstrap3使用bootstrap datetimepicker日期外掛程式，bootstrap日期外掛程式

bootstrap3使用bootstrap datetimepicker日期外掛程式，bootstrap日期外掛程式

沒用過bootstrap2，所以之間的差異不清楚，但是看往上基本上都是說bootstrap2與bootstrap-datetimepicker的使用，之間會有不同，所以寫下記錄，如有不對之處，還請指正！

網上下載bootstrap-datetimepicker-master.zip(bootstrap-datetimepicker日期外掛程式),bootstrap3.x

用法：

1.引入css檔案

<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"><link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

2.引入js檔案

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script><script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script><script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script><script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script><script type="text/javascript">

$('.form_date').datetimepicker({  language: 'zh-CN',  weekStart: 1,  todayBtn: 1,  autoclose: 1,  todayHighlight: 1,  startView: 2,  minView: 2,  forceParse: 0 });</script>

3.頁面的div

<div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">  <input class="form-control" size="16" type="text" value="" readonly>  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>

需要注意的點：

1.js參數解釋，可以自己設定試一下

$(‘.form_date').datetimepicker({ language: ‘zh-CN', weekStart: 1, todayBtn: 1,//顯示為今天的按鈕，0無1有 autoclose: 1,//單擊時間後日曆框是否自動關閉，1關閉，0不關閉 todayHighlight: 1,//今天高亮顯示 startView: 2,//展示的樣式，1小時，2日 minView: 2,//選取到的時間，2天，1小時 forceParse: 0 }); 

2.div必須位於js之前，或者說頁面div在js之前載入

3.div中data-date-format屬性與第二個input的id屬性為一致，這樣在選擇時間後才會賦值，並傳遞給後台
至此就可以實現日期外掛程式功能了。

但是，我的需求是，1.頁面載入，2.點擊某個按鈕模態框顯示，並ajax返回結果集，根據結果集來拼接出日期控制項的個數。由於日期控制項個數的不確定性，在試了各種方法之後發現，頁面上的div不能在點擊按鈕後動態產生。
只好在頁面最初展示的時候將所有資料中條數最多的查詢出來，放在頁面上：(紅色部分為相關代碼)

 int count = 0;   //將查詢結果做處理，如參數字典轉換   for(Service s:serviceList){    //資質欄位若不為空白，將code轉為name    if(null != s.getOutDate() && !"".endsWith(s.getOutDate())){     String[] outDate = s.getOutDate().split(",");     if(outDate.length>count){      count=outDate.length;     }     String outDateString = "";     if(outDate.length>0){      for(int i=0;i<outDate.length;i++){       Qualify qualify = qualifyServiceImpl.selectByPrimaryKey(outDate[i]);       if(i !=0 ){        outDateString = outDateString+",";       }       outDateString = outDateString+qualify.getQualifyName();      }     }     if(count != 0){      request.setAttribute("countQu", count);     }     s.setOutDate(outDateString);    }

並在頁面上使用jstl標籤產生div，並都設成為不可見:

<c:forEach var="i" begin="1" end="${countQu }" step="1">    <tr>     <td></td>     <td style="width:60%">      <div class="input-group date form_date " style="display: none;" data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input${i }" data-link-format="yyyy-mm-dd">       <input id="" class="form-control" size="16" type="text" value="" readonly>       <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>      </div>      <input type="hidden" id="dtp_input${i }" name="qualifyDate_ser"/>      <input type="hidden" id="" name="qualifyId_ser"/>     </td>    </tr>   </c:forEach>

ajax查詢後迴圈賦值的代碼就不貼了，如下:(有一個問題是時間選擇框不和時間顯示在一行，如有大神能幫忙解決的話不勝感激！！)

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。