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

  

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM