需求,默认选择十天区间,并且每次选择的日期必须小余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>

请鹅出战
328 声望3 粉丝

当我带上墨镜,也许我就真的瞎了。