ElementUI 日期范围选择器设置选择跨度一年、30天、7天

一、思路

利用组件的picker-options（object）属性以及属性下的disabledDate和onPick来实现选择日期范围跨度设置。

 

二、代码实现

设置选择范围跨度为一年：

<template>
  <div class="dy-page">
    <el-date-picker
      v-model="timeRange"
      range-separator="至"
      start-placeholder="开始月份"
      end-placeholder="结束月份"
      type="monthrange"
      format="yyyy-MM"
      value-format="yyyy-MM"
      :picker-options="pickerOptions">
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timeRange: [],
      pickerMinDate: null,
      pickerRange: 3600 * 1000 * 24 * 365, // 可选择日期范围（一年）
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime()
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (time.getTime() > (this.pickerMinDate + this.pickerRange)) || (time.getTime() < (this.pickerMinDate - this.pickerRange))
          }
          return false
        }
      }
    }
  }
}
</script>

类似的，想要设置选择范围跨度为30天、7天，只需要修改下上述代码中的pickerRange，即：

30天：

pickerRange: 3600 * 1000 * 24 * 30  // 可选择日期范围

7天：

pickerRange: 3600 * 1000 * 24 * 7  // 可选择日期范围

本文完，记录于2022-10-19.