element ui实现form验证起始时间不能大于结束时间

  • A+
所属分类:Web前端
摘要

    

        <el-form-item label="开始时间" :label-width="formLabelWidth" prop="startTime">             <el-date-picker v-model="form.startTime" type="datetime" format='yyyy-MM-dd HH:mm' value-format="yyyy-MM-dd HH:mm"                 :picker-options="pickerOptionsStart" default-time="08:00:00" placeholder="选择开始时间">             </el-date-picker>         </el-form-item>         <el-form-item label="结束时间" :label-width="formLabelWidth" prop="endTime">             <el-date-picker v-model="form.endTime" type="datetime" format='yyyy-MM-dd HH:mm' value-format="yyyy-MM-dd HH:mm"                 :picker-options="pickerOptionsEnd" default-time="20:00:00" placeholder="选择结束时间">             </el-date-picker>         </el-form-item>

		data() { 			return { 				form: { 					startTime: '', 					endTime: '' 				}, 				rules: { 					startTime: [{ 						required: true, 						message: '请选择开始时间', 						validator: this.pickerOptionsStart, 						trigger: 'change' 					}], 					endTime: [{ 						required: true, 						message: '请选择结束时间', 						validator: this.pickerOptionsEnd, 						trigger: 'change' 					}] 				}, 				pickerOptionsStart: { 					disabledDate: time => { 						let endDateVal = this.form.endTime; 						if (endDateVal) { 							return time.getTime() > new Date(endDateVal).getTime(); 						} 					} 				}, 				pickerOptionsEnd: { 					disabledDate: time => { 						let beginDateVal = this.form.startTime; 						if (beginDateVal) { 							return (time.getTime() < new Date(beginDateVal).getTime() - 1 * 24 * 60 * 60 * 1000) 						} 					} 				} 			} 		}