html
<el-row>
<el-col :span="12">
<el-form-item label="实际开始日期" style="margin-top: 10px;" prop='realBeginDate'>
<el-date-picker v-model="pmTaskProgressFeedback.realBeginDate" type="date" placeholder="请选择实际开始日期":disabled="pmTaskProgressFeedback.progress == 0" value-format="yyyy-MM-dd" ></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12" v-if="pmTaskProgressFeedback.progress == 100">
<el-form-item label="实际结束日期" style="margin-top: 10px;" prop='realEndDate'>
<el-date-picker v-model="pmTaskProgressFeedback.realEndDate" type="date" placeholder="请选择实际结束日期" :disabled="pmTaskProgressFeedback.progress == 0" value-format="yyyy-MM-dd" :picker-options='realEndTimeOptions'></el-date-picker>
</el-form-item>
</el-col>
</el-row>
使用picker-options来进行限定,这里需要的是picker-options绑定的值最好在computed中进行,因为网上资料让在data中定义,但是,data函数中无法拿到表单的值,会报错,所以解决办法是在computed中定义
javascript
computed:{
// 实际结束日期必须选择实际结束日期之后
realEndTimeOptions:vm =>{
return{
disabledDate:time=>{
let beginDateVal = `${vm.pmTaskProgressFeedback.realBeginDate}`;
if (beginDateVal) {
return (
time.getTime() <
new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000 - 16.64e7
);
}else {
return time.getTime() < Date.now() - 8.64e7;
}
}
}
}
},