需要用到的css、js文件如下
版本截图如下:
引用示例:
//CSS
<link href="${path}/static/css/bootstrap.min.css" rel="stylesheet">
<link href="${path}/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
//JS
<%--jquery必须放在其他js文件之前--%>
<script src="${path}/static/js/jquery.min.js"></script>
<%--bootstrap日期选择器国际化包--%>
<script src="${path}/static/js/moment-with-locales.min.js"></script>
<script src="${path}/static/js/bootstrap.min.js"></script>
<%--bootstrap日期选择器包--%>
<script src="${path}/static/js/bootstrap-datetimepicker.min.js"></script>
//示例代码
<div class="form-group">
<label class="col-sm-2 control-label">出版日期</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input_book_published"
placeholder="book published">
</div>
</div>
js代码
//日期选择器
$('#input_book_published').datetimepicker({
//'dddd YYYY年MM月DD日 HH:mm:ss' 星期几 年月日 时分秒
//YYYY年MM月DD日 HH:mm:ss' 年月日 时分秒
format: 'YYYY-MM-DD',
//国际化,这里指中文
language: "zh-CN",
//判断日期是否改变,改变就将日期选择框关闭
}).on('dp.change', function (ev) {
var newDateTime = ev.date ? ev.date.format('yyyy-MM-dd HH:mm:ss') : "";
var oldDateTime = ev.oldDate ? ev.oldDate.format('yyyy-MM-dd HH:mm:ss') : "";
if (newDateTime != oldDateTime) {
$(this).data("DateTimePicker").hide();
}
});
成功截图