elementUi中el-date-picker；两个日期选择器第二个必须在第一个之后

最新推荐文章于 2024-05-20 14:26:34 发布

Miketutu

最新推荐文章于 2024-05-20 14:26:34 发布

阅读量706

点赞数 3

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Miketutu/article/details/138175658

版权

<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中定义

 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;
                }
            }
        }
     }
    },