这个是element单级选择器用拉两个

 引入这个是,可能有些需求是默认选择最近多久多久的,当然也可以不写直接让yeartsstart和yeartsEnd:''。

这个就是算法就是第一个不能大于第二个,第二个不能小于第一个,还有不能选择大于今年

 1.这是第一部分

<el-form-item label="">
        <el-date-picker
            v-model="searchForm.yeartsStart"
            :picker-options="startDatePicker"
            value-format="yyyy"
            type="year"
            placeholder="开始时间"
          >
          </el-date-picker>
          ~
          <el-date-picker
            v-model="searchForm.yeartsEnd"
            value-format="yyyy"
            :picker-options="endDatePicker"
            type="year"
            placeholder="结束时间"
          >
        </el-date-picker>
      </el-form-item>

2.这是第二部分

 data () {
    return {
      getUserInfo,
      startDatePicker: this.beginDate(), // 开始年
      endDatePicker: this.processDate(), // 结束年
      searchForm: {
        yeartsStart: moment().subtract(5, 'year').format('YYYY'), // 开始年
        yeartsEnd: moment().format('YYYY') // 结束年
      }
    }
  },

3.这是第三部分

// 时间算法
    beginDate () {
      let self = this
      return {
        disabledDate (time) {
          let fixedTime = new Date(time)
          if (self.searchForm.yeartsEnd !== null) {
            return fixedTime.getFullYear() > self.searchForm.yeartsEnd || fixedTime.getFullYear() > new Date().getFullYear()
          } else {
            return fixedTime.getFullYear() > new Date().getFullYear()
          }
        }
      }
    },
    processDate () {
      let self = this
      return {
        disabledDate (time) {
          let fixedTime = new Date(time)
          return fixedTime.getFullYear() < self.searchForm.yeartsStart || fixedTime.getFullYear() > new Date().getFullYear()
        }
      }
    },

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐