vue 时间组件限制选择范围

<el-date-picker
          v-model="searchData.params[search.value]"
          type="date"
          :placeholder="search.placeholder"
          :pickerOptions="search.pickerOptions"
          :value-format="search.valueFormat">
</el-date-picker>

pickerOptions 值

choiceDate:null,
pickerOptions:{
 onPick: ({ maxDate, minDate }) => {
   // 把选择的第一个日期赋值给一个变量。
   this.choiceDate = minDate.getTime();
   // 如果选择了两个日期了,就把变量设置空
   if (maxDate) this.choiceDate = "";
  },
 disabledDate: time => {
    if (this.choiceDate) {
        // 7天的时间戳
        const one = 7 * 24 * 3600 * 1000;
        // 当前日期 - one = 7天之前
        const minTime = this.choiceDate - one;
        // 当前日期 + one = 7天之后
        const maxTime = this.choiceDate + one;
        return (
            time.getTime() < minTime ||
            time.getTime() > maxTime ||
            // 限制不能选择今天及以后
            time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
        );
    } else {
      // 如果没有选择日期,就要限制不能选择今天及以后
      return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
      }
    }
}

 

posted @ 2020-10-29 13:08  LieJimmy  阅读(1666)  评论(0编辑  收藏  举报