element 日期范围选择器 动态设定范围

这是一个很***钻的需求。

用两个日期选择器拼接的方式做类似需求，做动态设定范围很容易；

日期范围选择器静态设定范围也很容易；

但是又要日期范围选择器，又要动态设定范围就很麻烦。

 

还好我找到（抄到）了一个分享。

但我不喜欢直接复制粘贴，所以我们分析一下这个代码——我实验过了，是可以用的。

 

  data() {
    return {
      pickerOptions2: {
        disabledDate: theDate => {
          const oneDay = 3600 * 1000 * 24

          const current = theDate.getTime()
          const now = Date.now()

          const condition1 = current > now
          if (!this.minDateTimestamp) return condition1

          const pickerRangeNum = 30

          // 时间范围最大可选择30天,最晚时间为今天
          const lastMonthBegin = this.minDateTimestamp
          const lastMonthEnd = lastMonthBegin + pickerRangeNum * oneDay

          return (
            condition1 || current < lastMonthBegin || current > lastMonthEnd
          )
        },
        onPick: ({ maxDate, minDate }) => {
          this.minDateTimestamp = minDate.getTime()
          if (maxDate) {
            this.minDateTimestamp = 0
          }
        },
      },
    }
  },

 

要点 1

这里必须用箭头函数。

不使用箭头函数this会指向  pickerOptions2，使用箭头函数才能指向 vue 实例。

要点 2

设定 minDateTimestamp。element 的逻辑是不管哪个面板，先选的一定是开始时间，后选的一定是结束时间。

所以可以自己记一下开始时间，选择了结束时间之后再把记录的开始时间清零。

要点 3

利用记住的开始时间做结束时间选择范围的判定。disabledDate 本质是个过滤器方法，便利渲染日期面板的时候会根据这个方法渲染 disable 状态。

。