欢迎光临
我的个人博客网站

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

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

  

  

赞(0) 打赏
未经允许不得转载:张拓的天空 » element ui实现form验证起始时间不能大于结束时间
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏