bootstrap3使用bootstrap datetimepicker日期插件

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

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">



$('.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查询后循环赋值的代码就不贴了，效果图如下:(有一个问题是时间选择框不和时间显示在一行，如有大神能帮忙解决的话不胜感激！！) 



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。