ElementUI 年份范围选择器 el-year-picker

效果图如下:

代码如下:

js 复制代码
<template>
  <div class="year-range-picker">
    <el-date-picker
      v-model="dateList[0]"
      type="year"
      placeholder="选择开始年"
      :size="size"
      class="year-picker"
      format="yyyy"
      :value-format="valueFormat"
      :picker-options="startDatePicker"
    >
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker
      v-model="dateList[1]"
      type="year"
      placeholder="选择结束年"
      :size="size"
      class="year-picker"
      :value-format="valueFormat" 
      :picker-options="endDatePicker"
    >
    </el-date-picker>
  </div>
</template>


<script>
export default {
  name: "el-year-picker",
  // 接收父组件传入的数据
  props: {
    value: {
      // type: Array,
      required: true,
    },
    size: {
      type: String, default: 'mini'
    },
    valueFormat: {
      type: String, default: 'yyyy'
    },
  },
  data() {
    return {
      dateList: [],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
    };
  },
  watch: {
    value(v) {
      this.dateList = v || []
    },
    dateList(v) {
      this.$emit('input', v)
    }
  },
  mounted() {
  },
  methods: {
    // 选择年份范围选择时开始时间不能大于结束时间,结束时间不能小于开始时间

    // 提出开始时间必须小于提出结束时间
    beginDate() {
      let self = this
      return {
        disabledDate(time) {
          if (self.dateList[1] !== '') {
            let fixedTime = new Date(time)
            return fixedTime.getFullYear() > self.dateList[1]
          }
        }
      }
    },
    // 提出结束时间必须大于提出开始时间
    processDate() {
      let self = this
      return {
        disabledDate(time) {
          // let fixedTime = new Date(self.oldTime).getTime()
          // return time.getTime() < fixedTime
          let fixedTime = new Date(time)
          return fixedTime.getFullYear() < self.dateList[0]
        }
      }
    },

  },
};
</script>


<style scoped>
.year-range-picker {
  color: black;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius:4px;
  line-height: 25px;
  overflow: hidden;
  display: flex;
  margin: 4px 0;
}

>>> .el-input__inner{
  border: 0;
  /*padding: 0;*/
  line-height: 28px;
  height: 28px;
  margin:0;
}

.range-word {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 12px;
}

.year-range-picker .year-picker {
  max-width: 150px;
  margin:0;
}
</style>
相关推荐
LoveDreaMing几秒前
微前端-无界的实操和源码分析
前端·javascript·架构
去伪存真23 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香25 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
人工智能的苟富贵27 分钟前
使用 Tauri + Rust 构建跨平台桌面应用:前端技术的新边界
开发语言·前端·rust·electron
拉不动的猪35 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
小p1 小时前
react学习2:react中常用的hooks
前端·react.js
南清的coding日记1 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
Xiaouuuuua1 小时前
2026年计算机毕业设计项目合集
前端·vue.js·课程设计
IT_陈寒1 小时前
React 18并发模式实战:3个优化技巧让你的应用性能提升50%
前端·人工智能·后端
用户761736354011 小时前
CSS重点知识-样式计算
前端