基于element-ui的年份范围选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于element-ui的年份范围选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基于element-ui的年份范围选择器

element-ui官方只有日期范围和月份范围选择器，根据需求场景需要，支持年份选择器，原本使用两个分开的年份选择器实现的，但是往往有些是不能接受的。在网上找了很多都没有合适的，所以打算自己改造一个，仅供码友们参考。

element 年份选择器,vue,element-ui,datePicker

下载对应的代码到本地文件地址，以下是我的目录结构，我将下载的文件放到了src/components下。

全局引入或者局部引入使用

全局引入

 import DatePicker from '@/components/datePicker/src/date-picker.js'
 Vue.component(DatePicker.name, DatePicker)

局部引入

 import DatePicker from '@/components/datePicker'

调用方法,下面的参数和element-ui原有el-date-picker的api保持不变

 <date-picker
   type="yearrange"
     v-model="filter1"
     value-format="yyyy"
     format="yyyy年"
     range-separator="至"
     start-placeholder="开始年份"
     end-placeholder="结束年份"
   ></date-picker>

日期限制处理（禁用），下面我以我这边的需求为例，
1. 选择的年份需等于或小于当前年份
2. 选择的年份范围必须在三年之内

  data () {
    return {
      timeRange: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.timeRange = minDate
          if (maxDate) this.timeRange = ''
        },
        disabledDate: time => {
          if (this.timeRange) {
            const minTime = this.timeRange - 3
            const maxTime = this.timeRange + 3
            return (
              dayjs(time).format('YYYY') < minTime ||
              dayjs(time).format('YYYY') > maxTime ||
              time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            )
          } else {
            return (
              time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
            )
          }
        }
      }
    }
  }