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>
相关推荐
aesthetician1 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666816 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD26 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆26 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel29 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒36 分钟前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist9 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式