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