element ui實現form驗證起始時間不能大於結束時間
阿新 • • 發佈:2020-11-02
<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) } } } } },