左小白的技术日常
Github
2020/07/26
Author: guoqzuo

element时间选择器限制选中:不能选择今天之后的日期,时间间隔不能超过一个月

一般使用 picker-options 这个属性来disable某些时间段,注意 如果设置了default-time 00:00:00 - 23:59:59 会影响对应的日期判断,必要时可以去掉,逻辑可以由后端处理

不能选择今天之后的日期

<el-date-picker
  v-model="value1"
  type="date"
  :picker-options="pickerOptions"
  placeholder="选择日期">
</el-date-picker>
<script>
export default {
  data() {
    return {
      // 时间不能选择今天之后的日期
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      }
    }
  }
}
</script>

时间间隔不能超过一个月

点击某个时间后会触发 pickerOptions里的 onPick函数,获取当前点击的时间,然后计算时间disabled前后一个月的时间

// <el-date-picker v-model="date" type="daterange" :picker-options="pickerOptions">
// </el-date-picker>
export default {
  data() {
    const pickerOptions = {
      // 选中时间时触发 element第一次选中后会赋值给minDate
      onPick: ({ maxDate, minDate }) => {
        this._curClickDate = minDate.getTime()
        // 第二次选中后,按两次点击的时间顺序依次赋值给 minDate、maxDate
        // 且面板会关闭,这时要清空_curClickDate,供下一次使用
        maxDate && (this._curClickDate = '')
      },
      disabledDate: time => {
        const { _curClickDate } = this
        const gap = 31 * 24 * 3600 * 1000 // 一个月,按31天算
        const t = time.getTime()
        let start = _curClickDate - gap
        let end = _curClickDate + gap
        return t > Date.now() || (_curClickDate && (t > end || t < start))
      }
    }
    return {
      date: '',
      pickerOptions,
    }
  }
}

具体demo:在线体验 github demo源码地址

如果可选日期由后台的接口返回

这种情况可以把pickerOptions放到计算属性里