乐趣区

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

需要,默认抉择十天区间,并且每次抉择的日期必须小余 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>
退出移动版