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

Posted karila

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
            },

  

以上是关于vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)的主要内容,如果未能解决你的问题,请参考以下文章

vue-form-table(vuejs+element-ui的表格表单控件的二次封装插件)

vue-elementUi-Calendar前端日历插件折腾记

vue +element 封装一个选人弹窗

vue+elementui 封装表单验证

Vue+ElementUI表格封装 支持render

vue+elementUi开发一个可拖拽的和拉伸编辑的画板