1. 限制时间段
<el-form-item
label="选择某计划"
prop="plan">
<el-select
v-model="form.plan"
placeholder="选择某计划"
@change="onChangePlan">
<el-option
v-for="item in planList"
:key="item.planId"
:label="item.planName"
:value="item.planId"/>
</el-select>
</el-form-item>
<el-date-picker
v-model="form.startDate"
value-format="timestamp"
:editable="false" // 文本可输入
type="date"
placeholder="请选择开始时间"
:picker-options="datePickerOptions" // 当前时间日期选择器特有的选项
/>
export default {
data () {
return {
form:{
id:1, // 查找的id
},
planList: [], // 后台返回数据存储
// 通过选择不同的计划获得不同的时间戳
planTimeList: {
startDate: null, // 某计划开始的时间戳
endDate: null, // 某计划结束的时间戳
},
// 当前时间日期选择器特有的选项
datePickerOptions: {
disabledDate: (time) => {
return this.dealDisabledDate(time)
},
},
}
},
},
methods:{
onChangePlan(){
const res = this.planList.find(x => x.id === this.form.id)
this.planTimeList.startDate = res.startDate
this.planTimeList.endDate = res.endDate
}
dealDisabledDate (time) {
if (this.planTimeList.endDate) {
if (Date.now() > this.planTimeList.startDate) {
return this.planTimeList.endDate < time.getTime() || time.getTime() < Date.now() - 8.64e7
} else {
return this.planTimeList.endDate < time.getTime() || time.getTime() < this.planTimeList.startDate
}
} else {
return time.getTime() < this.planTimeList.startDate
}
},
}
2.回显 当前时间>开始时间 禁止更改
:disabled="!!source&&new Date().valueOf() > source.startDate"