年之年的选择，组装版

javascript 复制代码

组件：

javascript 复制代码

<!--
 * @Author: liuyu liuyu@xizhengtech.com
 * @Date: 2023-02-01 16:57:27
 * @LastEditors: wangping wangping@xizhengtech.com
 * @LastEditTime: 2023-06-30 17:25:14
 * @Description: 时间选择年 - 年
-->
<template>
  <div class="year-range-picker">
    <el-date-picker v-model="dateList[0]" :clearable="false" type="year" placeholder="开始年" class="year-picker" format="yyyy" value-format="yyyy" :picker-options="startDatePicker" @change="getTime">
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker v-model="dateList[1]" prefix-icon='0' type="year" placeholder="结束年" class="year-picker" value-format="yyyy" :picker-options="endDatePicker" @change="getTime">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateList: [],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      // 开始年度和结束年度 添加限制
      // startDatePicker: {
      //   disabledDate: (time) => {
      //     if (this.startDatePicker) {
      //       return (
      //         time.getTime() > this.startDatePicker ||
      //         time.getTime() > Date.now()
      //       );
      //     }
      //   },
      // },
      // endDatePicker: {
      //   disabledDate: (time) => {
      //     return (
      //       time.getTime() < this.endDatePicker ||
      //       time.getTime() > Date.now()
      //     );
      //   },
      // },
    };
  },
  created() {},
  watch: {
    // dateList(v) {
    //   this.$emit("input", v);
    // },
  },

  methods: {
    getTime(val) {
      console.log("但：", this.dateList);
      if (val == null) {
        this.dateList = [];
      }
      this.$emit("getTime", this.dateList);
    },
    // 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间
    // 提出开始时间必须小于提出结束时间
    beginDate() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.dateList[1] !== "" && self.dateList[1] !== null) {
            let fixedTime = new Date(time);
            return fixedTime.getFullYear() > self.dateList[1];
          } else {
            return;
          }
        },
      };
    },
    // 提出结束时间必须大于提出开始时间
    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 lang="scss" scoped>
.year-range-picker {
  width: 260px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  ::v-deep.el-date-editor {
    // .el-input__icon {
    //   display: none;
    // }
    .el-input__inner {
      border: none;
      text-align: center;
    }
  }
}
</style>

javascript 复制代码

使用：

javascript 复制代码

<YearYear @getTime="getTime"></YearYear>

 // 获取传过来的时间
getTime(val) {},