可以禁止选择未来日期，以及可选的日期范围控制，代码在最下面。
直接上代码：
先来一个不禁止选择的示例
<template><el-popoverref="popover"placement="bottom"v-model="showPanel"popper-class="custom_year_range"trigger="manual"v-clickoutside="() => { showPanel = false }"><div class="_inner floatPanel"><div class="_inner leftPanel"><div class="_inner panelHead"><iclass="_inner el-icon-d-arrow-left"@click="onClickLeft"></i><span>{{leftYearList[0] + '年 ' + '- ' + leftYearList[9] + '年' }}</span></div><div class="_inner panelContent"><div:class="{oneSelected: item === startYear && oneSelected,startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}"v-for="item in leftYearList":key="item"><a:class="{cell: true,_inner: true,selected: item === startYear || item === endYear,}"@click="onClickItem(item)"@mouseover="onHoverItem(item)">{{item }}</a></div></div></div><div class="_inner rightPanel"><div class="_inner panelHead"><iclass="_inner el-icon-d-arrow-right"@click="onClickRight"></i><span>{{rightYearList[0] + '年 ' + '- ' + rightYearList[9] + '年' }}</span></div><div class="_inner panelContent"><div:class="{startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}"v-for="item in rightYearList":key="item"><a:class="{cell: true,_inner: true,selected: item === endYear || item === startYear,}"@click="onClickItem(item)"@mouseover="onHoverItem(item)">{{item }}</a></div></div></div></div><div slot="reference"><divref="yearPicker"style="width: 100%"class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--small"><i class="el-input__icon el-range__icon el-icon-date"></i><inputclass="_inner range_input"ref="inputLeft"type="text"name="yearInput"placeholder="选择开始年份"v-model="startShowYear"@focus="onFocus"@keyup="handleInput('start')"/><span class="el-range-separator">{{sp }}</span><inputclass="_inner range_input"ref="inputRight"type="text"name="yearInput"placeholder="选择结束年份"v-model="endShowYear"@focus="onFocus"@keyup="handleInput('end')"/></div></div></el-popover></template><script>import moment from 'moment'import {clickoutside, SELECT_STATE } from './yearDate.js'export default {name: 'yearPicker',directives: {clickoutside },computed: {oneSelected() {return this.curState === SELECT_STATE.selecting && (this.startYear === this.endYear || this.endYear == null)},leftYearList() {return this.yearList.slice(0, 10)},rightYearList() {return this.yearList.slice(10, 20)}},props: {sp: {default: '至'},value: {default: null}},data() {return {itemBg: {},startShowYear: null,endShowYear: null,yearList: [],showPanel: false,startYear: null,endYear: null,curYear: 0,curSelectedYear: 0,curState: SELECT_STATE.unselect}},methods: {handleInput(type) {switch (type) {case 'start':if (isNaN(this.startShowYear)) {this.startShowYear = this.startYearreturn}this.startYear = this.startShowYear * 1breakcase 'end':if (isNaN(this.endShowYear)) {this.endShowYear = this.endYearreturn}this.endYear = this.endShowYear * 1break}[this.startYear, this.endYear] = [this.endYear, this.startYear]this.startShowYear = this.startYearthis.endShowYear = this.endYear},onHoverItem(iYear) {if (this.curState === SELECT_STATE.selecting) {const tmpStart = this.curSelectedYearthis.endYear = Math.max(tmpStart, iYear)this.startYear = Math.min(tmpStart, iYear)}},async onClickItem(selectYear) {if (this.curState === SELECT_STATE.unselect ||this.curState === SELECT_STATE.selected) {this.startYear = selectYearthis.curSelectedYear = selectYearthis.endYear = nullthis.curState = SELECT_STATE.selecting} else if (this.curState === SELECT_STATE.selecting) {this.endShowYear = this.endYear || this.startYearthis.startShowYear = this.startYearthis.curState = SELECT_STATE.selectedawait this.$nextTick()this.showPanel = falsethis.$parent?.$parent?.$parent?.$parent?.$parent.clearValidate?.()}},async onFocus() {await this.$nextTick()this.showPanel = true},updateYearList() {const startYear = ~~(this.curYear / 10) * 10console.log(startYear, this.curYear, 'this.curYearthis.curYearthis.curYear')this.yearList = []for (let index = 0; index < 20; index++) {this.yearList.push(startYear + index)}},onClickLeft() {this.curYear = this.curYear * 1 - 10this.updateYearList()},onClickRight() {this.curYear = this.curYear * 1 + 10this.updateYearList()}},watch: {value: {handler(val) {if (val?.length === 0) returnconst [first, end] = val || []this.startShowYear = firstthis.endShowYear = end},immediate: true,deep: true},startShowYear: {handler(val) {this.$emit('input', [val, this.endShowYear || ''])},immediate: true,deep: true},endShowYear: {handler(val) {this.$emit('input', [this.startShowYear || '', val])},immediate: true,deep: true}},created() {const [startYear, endYear] = this.value || []if (startYear) {this.startYear = Number(startYear)this.endYear = Number(endYear)this.curState = SELECT_STATE.selectedthis.curYear = startYear} else {this.curYear = moment().format('yyyy')}this.updateYearList()},mounted() {window.Vue = this}}</script><style lang="scss">.custom_year_range {.floatPanel {> div {width: 50%;}padding: 0 16px;// position: absolute;display: flex;background-color: #fff;z-index: 2000;border-radius: 4px;width: 650px;height: 250px;top: 40px;left: -50px;.panelContent {display: flex;flex-wrap: wrap;width: 100%;height: calc(100% - 70px);.oneSelected {border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.startSelected {background-color: #f2f6fc;border-top-left-radius: 24px;border-bottom-left-radius: 24px;}.endSelected {background-color: #f2f6fc;border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.betweenSelected {background-color: #f2f6fc;}> div {width: 75px;height: 48px;line-height: 48px;margin: 3px 0;// border-radius: 24px;text-align: center;a {display: inline-block;width: 60px;height: 36px;cursor: pointer;line-height: 36px;border-radius: 18px;&:hover {color: #409eff;}}.selected {background-color: #409eff;color: #fff;&:hover {color: #fff !important;}}}}.panelHead {position: relative;height: 46px;line-height: 46px;text-align: center;display: flex;align-items: center;justify-content: center;span {font-size: 16px;font-weight: 500;padding: 0 5px;line-height: 22px;text-align: center;cursor: pointer;color: #606266;&:hover {color: #409eff;}}i {position: absolute;cursor: pointer;&:hover {color: #3e77fc;}}}.rightPanel {padding-left: 8px;}.leftPanel .panelHead i {left: 20px;}.rightPanel .panelHead i {right: 20px;}}.floatPanel::before {content: "";height: 100%;top: 0;position: absolute;left: 50%;width: 1px;border-left: 1px solid #e4e4e4;}}</style><style lang="scss" scoped>.range_input {appearance: none;border: none;outline: 0;padding: 0;width: 39%;color: #606266;line-height: 1;height: 100%;margin: 0;text-align: center;display: inline-block;}.yearPicker {// font-size: 14px;// display: flex;// position: relative;// transition: all 0.3s;input:first-child {text-align: right;}.labelText {position: absolute;left: 8px;}background-color: #fff;span {padding: 0 8px;height: 32px;line-height: 32px;}border: 1px solid #eff1f3;height: 34px;line-height: 34px;border-radius: 4px;padding: 0 28px 0 8px;box-sizing: border-box;}input {width: 60px;border: none;height: 32px;line-height: 32px;box-sizing: border-box;background-color: transparent;}input:focus {outline: none;background-color: transparent;}.yearPicker:hover {border-color: #3e77fc;}.dateIcon {position: absolute;right: 16px;top: 9px;color: #adb2bc;}</style>
yearDate.js文件
export const clickoutside = {bind(el, binding, vnode) {function documentHandler(e) {// 这里判断点击的元素是否是本身，是本身，则返回if (el.contains(e.target)) {return false}// 判断指令中是否绑定了函数if (binding && binding.expression) {// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法if (binding.value && binding.value(e)) {binding.value(e)}}}// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听el.__vueClickOutside__ = documentHandlerdocument.addEventListener('click', documentHandler)},unbind(el, binding) {// 解除事件监听document.removeEventListener('click', el.__vueClickOutside__)delete el.__vueClickOutside__}}export const SELECT_STATE = {unselect: 0,selecting: 1,selected: 2}
我是禁止了未来日期，时间跨度，只能选3年，
代码如下：
<template><el-popoverref="popover"placement="bottom"v-model="showPanel"popper-class="custom_year_range"trigger="manual"v-clickoutside="() => { showPanel = false }"><div class="_inner floatPanel"><div class="_inner leftPanel"><div class="_inner panelHead"><iclass="_inner el-icon-d-arrow-left"@click="onClickLeft"></i><span>{{leftYearList[0] + '年 ' + '- ' + leftYearList[9] + '年' }}</span></div><div class="_inner panelContent"><div:class="{oneSelected: item === startYear && oneSelected,startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}"v-for="item in leftYearList":key="item"><av-if="item > disabledDate || ( curState === 1 && (item < curSelectedYear-spanNumber || item > curSelectedYear+spanNumber))":class="{cell: true,_inner: true,disabled:true}">{{item }}</a><av-else:class="{cell: true,_inner: true,selected: item === startYear || item === endYear,}"@click="onClickItem(item)"@mouseover="onHoverItem(item)">{{item }}</a></div></div></div><div class="_inner rightPanel"><div class="_inner panelHead"><iclass="_inner el-icon-d-arrow-right"@click="onClickRight"></i><span>{{rightYearList[0] + '年 ' + '- ' + rightYearList[9] + '年' }}</span></div><div class="_inner panelContent"><div:class="{startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}"v-for="item in rightYearList":key="item"><av-if="item > disabledDate || ( curState === 1 && (item < curSelectedYear-spanNumber || item > curSelectedYear+spanNumber))":class="{cell: true,_inner: true,disabled:true}">{{item }}</a><a v-else:class="{cell: true,_inner: true,selected: item === endYear || item === startYear,}"@click="onClickItem(item)"@mouseover="onHoverItem(item)">{{item }}</a></div></div></div></div><div slot="reference"><divref="yearPicker"style="width: 100%"class="el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--small"><i class="el-input__icon el-range__icon el-icon-date"></i><inputclass="_inner range_input"ref="inputLeft"type="text"name="yearInput"placeholder="选择开始年份"v-model="startShowYear":editable="false":clearable="false"@focus="onFocus"@keyup="handleInput('start')"/><span class="el-range-separator">{{sp }}</span><inputclass="_inner range_input"ref="inputRight"type="text"name="yearInput"placeholder="选择结束年份"v-model="endShowYear":editable="false":clearable="false"@focus="onFocus"@keyup="handleInput('end')"/></div></div></el-popover></template><script>import moment from 'moment'import {clickoutside, SELECT_STATE } from './yearDate.js'export default {name: 'yearPicker',directives: {clickoutside },computed: {oneSelected() {return this.curState === SELECT_STATE.selecting && (this.startYear === this.endYear || this.endYear == null)},leftYearList() {return this.yearList.slice(0, 10)},rightYearList() {return this.yearList.slice(10, 20)},},props: {sp: {default: '至'},value: {default: null}},data() {return {disabledDate:new Date().getFullYear(),//禁止未来日期spanNumber:2, //可选择的跨度最大数disabledYear:null,itemBg: {},startShowYear: null,endShowYear: null,yearList: [],showPanel: false,startYear: null,endYear: null,curYear: 0,curSelectedYear: 0,curState: SELECT_STATE.unselect}},methods: {handleInput(type) {switch (type) {case 'start':if (isNaN(this.startShowYear)) {this.startShowYear = this.startYearreturn}this.startYear = this.startShowYear * 1breakcase 'end':if (isNaN(this.endShowYear)) {this.endShowYear = this.endYearreturn}this.endYear = this.endShowYear * 1break}[this.startYear, this.endYear] = [this.endYear, this.startYear]this.startShowYear = this.startYearthis.endShowYear = this.endYear},onHoverItem(iYear) {if (this.curState === SELECT_STATE.selecting) {const tmpStart = this.curSelectedYearthis.endYear = Math.max(tmpStart, iYear)this.startYear = Math.min(tmpStart, iYear)this.disabledYear = iYear}},async onClickItem(selectYear) {if (this.curState === SELECT_STATE.unselect ||this.curState === SELECT_STATE.selected) {this.startYear = selectYearthis.curSelectedYear = selectYearthis.endYear = nullthis.curState = SELECT_STATE.selecting} else if (this.curState === SELECT_STATE.selecting) {this.endShowYear = this.endYear || this.startYearthis.startShowYear = this.startYearthis.curState = SELECT_STATE.selectedawait this.$nextTick()this.showPanel = falsethis.$parent?.$parent?.$parent?.$parent?.$parent.clearValidate?.()}},async onFocus() {await this.$nextTick()this.showPanel = true},updateYearList() {const startYear = ~~(this.curYear / 10) * 10this.yearList = []for (let index = 0; index < 20; index++) {this.yearList.push(startYear + index)}},onClickLeft() {this.curYear = this.curYear * 1 - 10this.updateYearList()},onClickRight() {this.curYear = this.curYear * 1 + 10this.updateYearList()}},watch: {value: {handler(val) {if (val?.length === 0) returnconst [first, end] = val || []this.startShowYear = firstthis.endShowYear = end},immediate: true,deep: true},startShowYear: {handler(val) {this.$emit('input', [val, this.endShowYear || ''])},immediate: true,deep: true},endShowYear: {handler(val) {this.$emit('input', [this.startShowYear || '', val])},immediate: true,deep: true}},created() {const [startYear, endYear] = this.value || []if (startYear) {this.startYear = Number(startYear)this.endYear = Number(endYear)this.curState = SELECT_STATE.selectedthis.curYear = startYear} else {this.curYear = moment().format('yyyy')}this.updateYearList()},mounted() {window.Vue = this}}</script><style lang="scss">.custom_year_range {.floatPanel {> div {width: 50%;}padding: 0 16px;// position: absolute;display: flex;background-color: #fff;z-index: 2000;border-radius: 4px;width: 650px;height: 250px;top: 40px;left: -50px;.panelContent {display: flex;flex-wrap: wrap;width: 100%;height: calc(100% - 70px);.oneSelected {border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.startSelected {background-color: #f2f6fc;border-top-left-radius: 24px;border-bottom-left-radius: 24px;}.endSelected {background-color: #f2f6fc;border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.betweenSelected {background-color: #f2f6fc;}> div {width: 75px;height: 48px;line-height: 48px;margin: 3px 0;// border-radius: 24px;text-align: center;a {display: inline-block;width: 60px;height: 36px;cursor: pointer;line-height: 36px;border-radius: 18px;&:hover {color: #409eff;}}.selected {background-color: #409eff;color: #fff;&:hover {color: #fff !important;}}}}.panelHead {position: relative;height: 46px;line-height: 46px;text-align: center;display: flex;align-items: center;justify-content: center;span {font-size: 16px;font-weight: 500;padding: 0 5px;line-height: 22px;text-align: center;cursor: pointer;color: #606266;&:hover {color: #409eff;}}i {position: absolute;cursor: pointer;&:hover {color: #3e77fc;}}}.rightPanel {padding-left: 8px;}.leftPanel .panelHead i {left: 20px;}.rightPanel .panelHead i {right: 20px;}}.floatPanel::before {content: "";height: 100%;top: 0;position: absolute;left: 50%;width: 1px;border-left: 1px solid #e4e4e4;}}</style><style lang="scss" scoped>.range_input {appearance: none;border: none;outline: 0;padding: 0;width: 39%;color: #606266;line-height: 1;height: 100%;margin: 0;text-align: center;display: inline-block;}.yearPicker {// font-size: 14px;// display: flex;// position: relative;// transition: all 0.3s;input:first-child {text-align: right;}.labelText {position: absolute;left: 8px;}background-color: #fff;span {padding: 0 8px;height: 32px;line-height: 32px;}border: 1px solid #eff1f3;height: 34px;line-height: 34px;border-radius: 4px;padding: 0 28px 0 8px;box-sizing: border-box;}input {width: 60px;border: none;height: 32px;line-height: 32px;box-sizing: border-box;background-color: transparent;}input:focus {outline: none;background-color: transparent;}.yearPicker:hover {border-color: #3e77fc;}.dateIcon {position: absolute;right: 16px;top: 9px;color: #adb2bc;}.disabled{background-color: #F5F7FA;cursor: not-allowed;color: #606266;border-radius: 18px;&:hover {cursor: not-allowed!important;color: #606266!important;}}</style>
参考地址：/p/44584a4a4953
