uni-app 日历时间范围反选

项目中遇到一个需求：让用户对某一段时间范围进行筛选，该需求利用uni-app的日历组件实现了功能，功能不大，实现起来很快，但是麻烦很快就来了，首先是uni-calendar组件居然没有暴露任何关于已经选中值方法，而唯一的change、confirm方法也仅仅是对外抛出放出，并不能实现反选，经过对uni-calendar源码的研究，发现它是通过class函数实现的，这就为我添加自定义的方法提供了可能，同时为了保证不影响其他页面的使用，我选择了新增一个字段来使用，废话不多话直接上代码：

在uni-calendar 里面加入

 

 props: {
    defaultDate: {
      type: Array,
      default: () => [],
    },
  },
  // 在 uni-calendar watch里面加入
  watch: {
    defaultDate(newVal) {
      this.cale.setDefaultDate(this.nowDate.fullDate, newVal), (this.weeks =                 
      this.cale.weeks);
    },
  },
  // 在 uni-calendar created里面加入
  created() {
    this.cale = new Calendar({
      // date: new Date(),
      selected: this.selected,
      startDate: this.startDate,
      endDate: this.endDate,
      range: this.range,
      defaultDate: this.defaultDate, //加入的内容
    });
  },

在util里面加入

class Calendar {
  // 在util constructor里面加入
  // 入参 加入
  constructor({ date, selected, startDate, endDate, range, defaultDate } = {}) {
    // 当前日期
    this.date = this.getDate(new Date()); // 当前初入日期
    // 打点信息
    this.selected = selected || [];
    // 范围开始
    this.startDate = startDate;
    // 范围结束
    this.endDate = endDate;
    this.range = range;
    // 反选日期 加入的内容
    this.defaultDate = defaultDate;
    // 多选状态
    this.cleanMultipleStatus();
    // 每周日期
    this.weeks = {};
    // this._getWeek(this.date.fullDate)
  }
  // 在util cleanMultipleStatus 里面加入
  cleanMultipleStatus() {
    this.multipleStatus = {
      before: "",
      after: "",
      data: [],
    };
    // 以下为加入的内容
    if (this.defaultDate.length > 0 && this.multipleStatus.data.length == 0) {
      this.multipleStatus.before = this.defaultDate[0];
      this.multipleStatus.after = this.defaultDate[1];
      this.multipleStatus.data = this.geDateAll(this.defaultDate[0], this.defaultDate[1]);
    }
  }
  /**
   * 设置默认选择 添加新的函数
   */
  setDefaultDate(date, val) {
    if (val.length > 0) {
      this.multipleStatus.before = this.defaultDate[0];
      this.multipleStatus.after = this.defaultDate[1];
      this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
    }
    this._getWeek(data);
  }
}

以上代码即可实现uni-app反选时间范围