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);
        });
    }