element-ui 日期选择器date-picker 设置某一日期前禁用

本篇博文是为了记录 日期选择器datepicker设置为某一日期前禁用 的问题。

以下列 选择日 为例展示。

1.前置知识

阅读element-ui文档后，我们获取到了 日期禁用 所需的属性和方法

<el-date-picker>的属性

picker-options详解

事件

 2.代码部分

我的业务逻辑是：获取到当前行的原计划时间，选择器要选择延期时间，且不能早于原计划时间。

html代码

// 我的项目中将日期选择器放在了作用于插槽中，所以下面用到了scope.row
<el-date-picker
    v-model="scope.row.delayPlanExitDate"
    type="date"
    placeholder="选择日期"
    @focus="throwDate(scope.row)"  // 这里我抛出了下面需要用到的原计划时间，并存储到data中
    :picker-options="pickerOptions">
</el-date-picker>

javascript代码

// 写在 data 中
pickerOptions: {
               //disabledDate是一个函数,参数time是当前选中的日期值,这个函数需要返回一个Boolean值
                disabledDate: (time) => {
                    return this.dealDisabledDate(time, this.planExitDate)
                    // dealDisabledDate是自定义的时间处理函数
                }
            }

// 写在 methods 中，自定义时间处理函数

dealDisabledDate(time, date) {
            return time.getTime() - 8.64e7 < new Date(date).getTime()
            // 这里将其转化为时间戳进行大小比较，一天的毫秒数为8.64e7，通过是否减去8.64e7来达到巨决定当前日期可选不可选的目的
        },