年之年的选择，组装版

组件：

<!--* @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() < fixedTimelet 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>

使用：

<YearYear @getTime="getTime"></YearYear>// 获取传过来的时间
getTime(val) {},