关于vue.js:Elementui日期区间组件动态禁用日期disabledDate

45次阅读

共计 1040 个字符，预计需要花费 3 分钟才能阅读完成。

需要，默认抉择十天区间，并且每次抉择的日期必须小余 90 天。

/**
 *  日期控件动静设置最大跨度，解决 elementui 日期区间，第一次点击日期，动静解决 disabledDate 禁用日期的跨度。*  @param {Number} _this this
 *  @param {Number} day 天
 *  @returns {Blob} 返回 pickerOptions 数据
 *  @example this.$fc.pickerOptionsDynamic(this, 90);
 * */
export function pickerOptionsDynamic(_this, day) {
  const time = 3600*1000*24*day;
  let minDate = null;
  const pickerOptions = {disabledDate(time) {if (minDate === null) {const min = Date.now() - time;
        return time.getTime() > Date.now() || time.getTime() < min;} else {const max = new Date(minDate).getTime() + time;
        const min = new Date(minDate).getTime() - time;
        if (max >= Date.now()) {return time.getTime() > Date.now() || time.getTime() < min;
        } else {return time.getTime() > max || time.getTime() < min;}
      }
    },
    onPick: (opt) => {minDate = _this.parseTime(opt.minDate, '{y}-{m}-{d}');
    }
  }
  return pickerOptions;
}

<el-date-picker
  v-model="queryParams.date"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="完结日期"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  :clearable="false"
  :editable="false"
  :unlink-panels="true"
  :picker-options="$yFc.pickerOptionsDynamic(this, 90)">
</el-date-picker>

正文完