bootstrap-datetimepicker的两种版本

1.引入js/css

<link rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}"/> 

<script th:src="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js}"></script>

在html中加入div和input

<div class="right-input date input-group" style="width: 100px;">

　　<input type="text" class="form-control ant-input" style="float: inherit; width: 150px; height: 25px;" name="startTime" id="starttime" />

       <span class="input-group-addon" style="padding-right: 0; padding-left: 2px; padding-bottom: 0; padding-top: 5px; margin: 0; width: auto; display: inherit">

       <span class="glyphicon glyphicon-calendar" style="top: 0px;">

        </span>

　　</span>

</div>

在js中初始化 bootstrap-datetimepicker 

$(‘.date‘).datetimepicker({
　　todayBtn : true,  //是否打开定位此时此刻的标签
　　autoclose : true,  //选择时间以后是否自动关闭
　　format : "yyyy-mm-dd hh:mm:ss"
}).on(‘changeDate‘, function(e){

clearInterval(se);
var btime = $(‘#starttime‘).val();
var date = new Date(btime);
var stime = new Date(date).getTime();
var etime = new Date(new Date()).getTime();
usedTime = stime- etime; //两个时间戳相差的毫秒数
if(usedTime>0){
//调用setInterval控制
se = setInterval(‘t_time()‘, 1000);
}
});

//更多的初始化设置可以在网上搜索

2.版本4.0的datetimepicker

<script th:src="@{/plugin/datetimepicker/moment-with-locales.js}"></script>
<script th:src="@{/plugin/datetimepicker/bootstrap-datetimepicker.js}"></script>

<link rel="stylesheet" th:href="@{/plugin/datetimepicker/bootstrap-datetimepicker.css}"/> 

html中div和input的设置如上

js的初始化如下，4.0版本的初始化设置不一样，详情可以在js里面看

$(‘.date‘).datetimepicker({
//startDate: new Date,
showTodayButton : true,
showClear :true,
minDate: new Date(),
keepOpen: true,
widgetPositioning: {
horizontal: ‘right‘,
vertical: ‘top‘
},
format : "YYYY-MM-DD hh:mm:ss"
}).bind(‘dp.change‘, function(e) { //绑定的变更方法
clearInterval(se);
var btime = $(‘#starttime‘).val();
var date = new Date(btime);
var stime = new Date(date).getTime();
var etime = new Date(new Date()).getTime();
usedTime = stime- etime; //两个时间戳相差的毫秒数
if(usedTime>0){
//调用setInterval控制
se = setInterval(‘t_time()‘, 1000);
}
});

bootstrap-datetimepicker的两种版本

原文：https://www.cnblogs.com/annahsq/p/14029734.html