vue+elementUI封裝的時間插件（有起始時間不能大於結束時間的驗證）

vue+elementUI封裝的時間插件（有起始時間不能大於結束時間的驗證）：

html:

<el-form-item label="活動時間" required>
                <el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime">
                    <el-form-item  prop="start_time">
                        <el-date-picker
                                type="datetime"
                                placeholder="起始時間"
                                v-model="activityInfo.start_time"
                                :picker-options="pickerBeginDateBefore"
                                style="width: 100%;"
                                ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" style="width:20px;text-align:center">至</el-col>
                <el-col :xs="22" :sm="11" :md="7" :lg="5" class="endTime">
                    <el-form-item prop="end_time">
                        <el-date-picker
                                type="datetime"
                                placeholder="結束時間"
                                v-model="activityInfo.end_time"
                                :picker-options="pickerBeginDateAfter"
                                :disabled="activityInfo.is_long"
                                style="width: 100%;"
                                ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="8" :lg="5" class="longTime">
                    <el-form-item label-width="7px" prop="is_long">
                        <el-checkbox v-model="activityInfo.is_long" :true-label="1" :false-label="0">長期</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-form-item>

　　js（在data的定義中）：

 pickerBeginDateBefore:{
                disabledDate: (time) => {
                        let beginDateVal =new Date( this.activityInfo.end_time).getTime();
                        if (beginDateVal) {
                                return (time.getTime() > beginDateVal) ||(time.getTime() < Date.now() - 8.64e7);
                        }else{
                            return time.getTime() < Date.now() - 8.64e7
                        }
                    }
            },
            pickerBeginDateAfter:{
                disabledDate: (time) => {
                    let beginDateVal = new Date(this.activityInfo.start_time).getTime();
                    if (beginDateVal) {
                        return time.getTime() < (beginDateVal-24*60*60*1000);
                    }
                }
            
                
            },

　　輸入驗證：

//在rules中:
start_time:[
                    {  required: true, message: '請選擇起始時間', trigger: 'change' }
                ],
                end_time:[
                    { validator: checkEndTime, trigger: 'change' }
                   /* {  required: true, message: '請選擇結束時間', trigger: 'change' }*/
                ],


//自定義的驗證函數：
checkEndTime=function(rule, value, callback){
        /*var isLongTime=$($(".longTime").find(".el-checkbox__input")[0]).hasClass("is-checked")
        if(!value && !isLongTime) {
            return callback(new Error('請選擇結束時間'));
        }*/
        if(!activity_edit.activityInfo.is_long && !value){
            return callback(new Error('請選擇結束時間'));
        }
        callback();
    };

　　

 值的類型轉換（在watch中）：

"activityInfo.start_time":{
                handler: function (val, oldVal) {
                    var _this=this;
                    if(val){
                        _this.activityInfo.start_time=_this.getDayTime(_this.activityInfo.start_time,true);
                    }
                },
                deep: true
            },
            "activityInfo.end_time":{
                handler: function (val, oldVal) {
                    var _this=this;
                    if(val){
                        _this.activityInfo.end_time=_this.getDayTime(_this.activityInfo.end_time,true);
                    }
                },
                deep: true
            },

　　

如果日期type="daterange"，不可選擇日期作如下處理

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>

data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}


//如果是不能選擇今日
data() {
   return {
     value: '',
     pickerOptions2: {
          disabledDate: (time) => {
                return time.getTime() > new Date();
              }
     }
   };
}