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