bootstrap3中使用bootstrap-datetimepicker日期插件的用法

没用过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>