快捷導(dǎo)航

bootstrap3使用bootstrap datetimepicker日期插件

更新時(shí)間：2017年05月24日 16:06:13 作者：三木來(lái)啦

這篇文章主要為大家詳細(xì)介紹了bootstrap3中使用bootstrap datetimepicker日期插件的用法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

沒(méi)用過(guò)bootstrap2，所以之間的差異不清楚，但是看往上基本上都是說(shuō)bootstrap2與bootstrap-datetimepicker的使用，之間會(huì)有不同，所以寫下記錄，如有不對(duì)之處，還請(qǐng)指正！

網(wǎng)上下載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.頁(yè)面的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>

需要注意的點(diǎn)：

1.js參數(shù)解釋，可以自己設(shè)置試一下

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

2.div必須位于js之前，或者說(shuō)頁(yè)面div在js之前加載

3.div中data-date-format屬性與第二個(gè)input的id屬性為一致，這樣在選擇時(shí)間后才會(huì)賦值，并傳遞給后臺(tái)
至此就可以實(shí)現(xiàn)日期插件功能了。

但是，我的需求是，1.頁(yè)面加載，2.點(diǎn)擊某個(gè)按鈕模態(tài)框顯示，并ajax返回結(jié)果集，根據(jù)結(jié)果集來(lái)拼接出日期控件的個(gè)數(shù)。由于日期控件個(gè)數(shù)的不確定性，在試了各種方法之后發(fā)現(xiàn)，頁(yè)面上的div不能在點(diǎn)擊按鈕后動(dòng)態(tài)生成。
只好在頁(yè)面最初展示的時(shí)候?qū)⑺袛?shù)據(jù)中條數(shù)最多的查詢出來(lái)，放在頁(yè)面上：(紅色部分為相關(guān)代碼)

 int count = 0;
   //將查詢結(jié)果做處理，如參數(shù)字典轉(zhuǎn)換
   for(Service s:serviceList){

    //資質(zhì)字段若不為空，將code轉(zhuǎn)為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);
    }

并在頁(yè)面上使用jstl標(biāo)簽生成div，并都設(shè)成為不可見(jiàn):

<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查詢后循環(huán)賦值的代碼就不貼了，效果圖如下:(有一個(gè)問(wèn)題是時(shí)間選擇框不和時(shí)間顯示在一行，如有大神能幫忙解決的話不勝感激??！)