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 },
文章来自:http://www.cnblogs.com/karila/p/7783033.html