vue:时间选择器自定义时间可选范围

时间自定义选择时间范围

			<el-date-picker
                    style="width:100%"
                    vModel={data['yearStart']}
                    picker-options={this.pickerStartOptions('listQuery')}
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                  />
                  <el-date-picker
                    style="width:100%"
                    vModel={data['yearEnd']}
                    type="date"
                    picker-options={this.pickerEndOptions('listQuery')}
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                  />

注：该方法需写再计算属性中

computed{
 //改变时触发计算属性
    pickerOptions() {
      return function(queryList) {
      //修改this指向，如果不修改this指向，则不会不会到自定的属性
        var _self = this
        return {
          disabledDate(time) {
            let yearStart = new Date(_self[queryList].yearStart)
            yearStart.setDate(yearStart.getDate())
            return time.getTime() < yearStart.getTime()
          },
        }
      }
    },
}

补充：（后面时分秒的禁选）在disabledDate的后面加一个selectableRange

在这里插入代码片

   selectableRange: (() => {
            const currentTime = _self[form][currentAttr]  //currentAttr：传入指定的一个时间节点
            if (
              currentTime &&
              moment(timeFilter(currentTime)).diff(
                moment(timeFilter(year)),
                'day'
              ) == 0   //判断滑动浏览的时间是否和当前的时间是同一天，如果是同一天则当前时间已过的时分秒🈲选，非当前时间都可选
            ) {
              let hour = year.getHours()
              let minute = year.getMinutes()
              let second = year.getSeconds()
              return [`${hour}:${minute}:${second} - 23:59:59`]
            } else if (_self[form][timeAttr]) {
              return [`00:00:00 - 23:59:59`]
            } else return ''
          })(),