el-date-picker的picker-options属性一直不生效,即使放入methods,也没效果,试了很多方法都不管用,准备从页面一个warn着手,浏览器有个warn提示:

Extraneous non-props attributes (value-format, picker-options) were passed_...

因为页面可以正常展示,这个warn就没管,后来想想,感觉这个提示就是这个属性没有继承。

最终发现,picker-options属性是Element UI中的,在Element Plus中这个属性已经弃用,所以不生效的。而@vue/cli 4.5.13引入 Element Plus ,因此不能使用picker-options属性,需要改用,:disabled-date

 <el-form-item label="起始时间" prop="publishDate">
                  <el-col :span="11">
                <el-date-picker
          v-model="ruleForm.publishDate"
          type="datetime"
          :disabled-date="publishDateAfter"   
          placeholder="选择日期时间"
        ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="终止时间" prop="offlineDate">
          <el-col :span="11">
        <el-date-picker
          v-model="ruleForm.offlineDate"
          type="datetime"
          :disabled-date="offlineDateAfter"       
          placeholder="选择日期时间"
        ></el-date-picker>
        </el-col>
               </el-form-item>

然后,对加入methods,属性生效:

   methods: {
            
     publishDateAfter(time){
         return time.getTime() > Date.now();
     },

     offlineDateAfter(time){
         return time.getTime() < this.ruleForm.publishDate || time.getTime() > Date.now();
     },
}

属性结果就是:起始时间只能选今天之前的,终止时间只能选开始时间之后,今天之前。

Logo

前往低代码交流专区

更多推荐