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开始往前禁选的。

效果图

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐