el-DatePicker禁选指定日期之前的时间

el-DatePicker禁选指定日期

在项目中我们需要日期控件禁用一个指定日期之前的时间，这个时间点是一个变量时，我们应该怎么做呢？在这里用到的是vue的写法。

<el-date-picker
    v-model="scope.row.interviewDate"
    :clearable="false"
    :picker-options="pickerOptions"
    :editable="false"
    value-format="yyyy-MM-dd"
    style="width: 150px"
 />

不要把pickerOption写在return中

    computed: {
        pickerOptions({ $props }) {
            return {
                disabledDate(time) {
                    const date1 = new Date($props.selectableDate);
                    const date2 = new Date(new Date().getFullYear() + '-' + ('0' + (new Date().getMonth() + 1)).substr(-2) + '-' + ('0' + (new Date().getDate())).substr(-2));
                    const diff = (date2 - date1) + 60 * 60 * 24 * 1000;
                    return (time.getTime() < Date.now() - diff) || (Date.now() < time.getTime());
                }
            };
        }
    },

• 其中selectableDate是变量，格式是2021-12-31之类的
• 其中date2指的是现在的时间，substr(-2)是给月，日大小不足10的补零，得到如2021-01-01之类的标准值。
• const diff = (date2 - date1) + 60 * 60 * 24 * 1000;是为了在差值上加一天，如果变量是2021-03-01，那么效果是从2021-02-28开始往前禁选的。

效果图