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