示例：
image.png
依赖：
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/plugins/datetimepicker/bootstrap-datetimepicker.min.css">
<script src="${pageContext.request.contextPath}/resources/plugins/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/plugins/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
html：
<div class="dateBox input-append date datetimepicker">
<input type="text" value="00:00" id="showBaseTime" data-format="hh:mm"/>
<div class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar" class="video-icon-all clock"></i>
</div>
</div>
css:
/*bootstrap-datetimepicker日历 css*/
.bootstrap-datetimepicker-widget.dropdown-menu {
width: 150px;
background: #262D36!important;
}
.timepicker-picker .btn {
background-color: transparent;
background-image: none;
}
.bootstrap-datetimepicker-widget:before {
border-bottom-color: transparent;
}
.bootstrap-datetimepicker-widget:after {
border-bottom: none;
}
.bootstrap-datetimepicker-widget td span:hover {
background: transparent;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
color: #A7BEDC;
font-weight: normal;
}
js:
//日历
$('.datetimepicker').datetimepicker({
maskInput: true, // disables the text input mask
pickDate: false, // disables the date picker
pickTime: true, // disables de time picker
pick12HourFormat: false, // enables the 12-hour format time picker
pickSeconds: false
});
