vue+elementUI封装的时间插件（有起始时间不能大于结束时间的验证）

Posted 2020-10-13 karila

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
            },