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

  

  

posted @ 2020-11-02 12:27  前端劝退师™  阅读(1920)  评论(0编辑  收藏  举报