1. 程式人生 > 實用技巧 >element ui實現form驗證起始時間不能大於結束時間

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" style='width: 100%;' :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" style='width: 100%;' :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)
						}
					}
				}
			}
		},