bootstrap-dateRangePicker基于BootStrap的日期时间处理（考试开始时间 结束时间）

最近在做一个考试系统，所以用到了考试开始时间和结束时间，百度了好多种，还是没搞出来，原谅我这个小菜鸡（哈哈），毕竟我是个后端，搞前端我还是很难受的，然后就各种尝试，抓破了头皮，终于写出来了，大佬勿喷阿！好了，废话不多说，上干货~~

效果图：


注：假如今天是2019/6/6，设置开始日期是从今天开始算起。如果开始时间设置为6月8号，则以前的 都不能选中。
1.引入一些css

<link href="plugins/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="/labhtml/css/validate/bootstrapValidator.css" rel="stylesheet">
<link href="/hrbust_lab_platform/css/datetimepicker/bootstrap-datetimepicker.css" rel="stylesheet" />

2.引入js

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/validate/bootstrapValidator.js"></script>
<script src="plugins/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="plugins/layer/layer.js"></script>

3.代码部分

<form id="edit-form" role="form" class="form-horizontal" action=" " >
<!--考试开始时间-->
<div class="form-group">
<label for="lm" class="col-sm-2 control-label"><span class="text-danger">*</span> 考试开始时间</label>
<div class="col-sm-3" style="display: inline-block">
<input type="text" class="form-control ksTime" id="examStartTime" name="examStartTime" required>
</div>
</div>
<!--考试结束时间-->
<div class="form-group">
<label for="zuozhe" class="col-sm-2 control-label"><span class="text-danger">*</span> 考试结束时间</label>
<div class="col-sm-3" style="display: inline-block">
<input type="text" class="form-control ksTime" id="examEndTime" name="examEndTime" required>
</div>
</form>

$('#edit-form').bootstrapValidator({
fields:{
examEndTime:{
message: '输入的值无效',
validators:{
notEmpty: {
message: '选择时间'
},
callback: {
message: '不在有效时间间隔内',
callback: function(value, validator) {
var orderMinTime = $("#orderMinTime").val() * 3600 * 1000;
var orderMaxTime = $("#orderMaxTime").val() * 24 * 3600 * 1000;

var examEndTime = value;
var examStartTime = $("#starTime").val();
var flag = true
if(examStartTime != null && examStartTime != '' && examStartTime != undefined) {
var endt = new Date(examEndTime.replace(/-/g, "/")).getTime();
var strt = new Date(examStartTime.replace(/-/g, "/")).getTime();
if(endt - strt < orderMinTime) {
flag = false;
} else if(endt - strt > orderMaxTime) {
flag = false;
}
}
$.ajax({
type: "get",
url: " 查所有的就ok. ",
async: true,
success: function(data) {
var endt = new Date(examEndTime.replace(/-/g, "/")).getTime();
if(data.status == 200) {
$.each(data.result, function(i, v) {
if(endt >= v.examStartTime && endt <= v.examEndTime) {
setTimeout(function(){
$('#examEndTime').val('');
}, 30 )
layer.msg('所选时段重复',function() {flag = false;});

}
});
}
}
});

return flag;

}
}
}
},
examStartTime: {
message: '输入的值无效',
validators: {
notEmpty: {
message: '选择时间'
},
callback: {
message: '不在有效时间间隔内',
callback: function(value, validator) {
var orderMinTime = $("#orderMinTime").val() * 3600 * 1000;
var orderMaxTime = $("#orderMaxTime").val() * 24 * 3600 * 1000;
var endTime = $("#examEndTime").val();
var starTime = $("#examStartTime").val();
var flag = true
if(endTime != null && endTime != '' && endTime != undefined) {
var endt = new Date(endTime.replace(/-/g, "/")).getTime();
var strt = new Date(starTime.replace(/-/g, "/")).getTime();
if(endt - strt < orderMinTime) {
flag = false;
} else if(endt - strt > orderMaxTime) {
flag = false;
}
$.ajax({
type: "get",
url: " 同上面的url.",
async: true,
success: function(data) {
var strt = new Date(starTime.replace(/-/g, "/")).getTime();
if(data.status == 200) {
$.each(data.result, function(i, v) {
if(strt >= v.examStartTime && strt <= v.examEndTime){
setTimeout(function(){
$('#examStartTime').val('');
}, 30 )
layer.msg('所选时段重复',function() {flag = false;});
}
});
}
}
});
}
return flag;

}
}
}
},

}
})
});
function timeRangeValidate(starTimeId, endTimeId, formId, format) {
$('#' + starTimeId).datetimepicker({
startDate: new Date(),
minView: 0,
minuteStep: 5,
format: format, //选择日期后，文本框显示的日期格式
language: 'zh', //汉化
autoclose: true //选择日期后自动关闭
}).on('changeDate', function(ev) {
$("#" + endTimeId).datetimepicker('setStartDate', new Date(ev.date.valueOf()))

var form = $("#" + formId).data("bootstrapValidator");
form.updateStatus(starTimeId, 'NOT_VALIDATED').validateField(starTimeId);

});
$('#' + endTimeId).datetimepicker({
startDate: new Date(),
minView: 0,
minuteStep: 5,
format: format, //选择日期后，文本框显示的日期格式
language: 'zh', //汉化
autoclose: true //选择日期后自动关闭
}).on('changeDate', function(ev) {
$("#" + starTimeId).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
var form = $("#" + formId).data("bootstrapValidator");

form.updateStatus(endTimeId, 'NOT_VALIDATED').validateField(endTimeId);
});
}