bootatrsp datetimepicker的初始化和阻止模态窗关闭(事件冒泡)

1.github下载资源包  http://www.bootcss.com/p/bootstrap-datetimepicker/

2.引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js 

3.中文包  bootstrap-datetimepicker.zh-CN.js

html

　　<div class="input-group date form_datetime" data-link-field="startDate">
　　<input id="startDate" class="form-control task-form"  name="startDate" placeholder="请选择开始时间" type="text" value="" readonly >
　　　　<span class="input-group-addon">
　　　　　　<span class="fa fa-calender"></span>
　　　　</span>
　　</div>

js　 

　　//设置空间的开始日期 (-2)前天 (-1)昨天 (0)今天 (1)明天 (2)后天
　　function setStartDate(addDayCount){
　　　　var dd=new Date();
　　　　dd.setDate(dd.getDate()+addDayCount);
　　　　var y=dd.getFullYear();
　　　　var m=dd.getMouth()+1;//获取当前月份的日期
　　　　var d=dd.getDate();
　　　　return y+"-"+m+"-"+d;

　　   }

　　　　$("#startDate").datetimepicker({//选择年月日

startDate:), //设置选择日期为当天的后一天,前边的不能选择
　　　　　　format: 'yyyy-mm-dd',
　　　　　　language: 'zh-CN',
　　　　　　weekStart: 1,
　　　　　　todayBtn: 1,//显示‘今日’按钮
　　　　　　autoclose: 1,
　　　　　　todayHighlight: 1,
　　　　　　startView: 2,
　　　　　　minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

　　　　　　clearBtn:true,//清除按钮

　　　　　　forceParse: 0
　　　　}).on('hide',function(event){

event.preventDefault();

event.stopPropagation();//阻止时间冒泡

});

也可以通过class选择器进行实例化,注意,如果是复合的class样式,只需要取form_datetime即可.

　　　$(". form_datetime").datetimepicker({//选择年月日
　　　　　　format: 'yyyy-mm-dd',
　　　　　　language: 'zh-CN',
　　　　　　weekStart: 1,
　　　　　　todayBtn: 1,//显示‘今日’按钮
　　　　　　autoclose: 1,
　　　　　　todayHighlight: 1,
　　　　　　startView: 2,
　　　　　　minView: 2,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

　　　　　　clearBtn:true,//清除按钮

　　　　　　forceParse: 0
　　　　}).on('hide',function(event){

event.preventDefault();

event.stopPropagation();//阻止时间冒泡

});

注意:

在 modal中的 datetimepicker 点击时候 ,会造成 里层modal-dialog也会被关闭.这是大概是因为事件冒泡造成的.在上边标红的地方,就是在datetimepicker实例化的国产中阻止事件的冒泡,点击时间控件时,不会关闭modal  dialog