element-ui 日期选择器 限制选择7天内并且不能选择今天及以后

瘦欲@ 提交于 2020-08-17 13:43:30
 <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();
      }
    }
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!