没用过bootstrap2，所以之间的差异不清楚，但是看往上基本上都是说bootstrap2与bootstrap-datetimepicker的使用，之间会有不同，所以写下记录，如有不对之处，还请指正！
网上下载bootstrap-datetimepicker-master.zip(bootstrap-datetimepicker日期插件),bootstrap3.x
用法：
1.引入css文件
<link href="https://www.jb51.net/article/bootstrap/css/bootstrap.min.css" media="screen"> <link href="https://www.jb51.net/css/bootstrap-datetimepicker.min.css" media="screen">
2.引入js文件
<script type="text/javascript" src="https://www.jb51.net/article/jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="https://www.jb51.net/article/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="https://www.jb51.net/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 data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input size="16" type="text" value="" readonly> <span><span></span></span> <span><span></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> <div data-date="" data-date-format="yyyy-mm-dd" data-link-field="dtp_input${i }" data-link-format="yyyy-mm-dd"> <input size="16" type="text" value="" readonly> <span><span></span></span> </div> <input type="hidden"/> <input type="hidden"/> </td> </tr> </c:forEach>
ajax查询后循环赋值的代码就不贴了，效果图如下:(有一个问题是时间选择框不和时间显示在一行，如有大神能帮忙解决的话不胜感激！！)
