elementUI新增date-picker，yearrange的2种方案。解决没有type=“yearrange“，不能选择年份的的问题

一、背景

即使是最新的elementUI 2.15.14中，也没有年份选择组件。

但是早在2021年，就有人向elementUI官方库提交pr，新增yearrange功能。可是直到目前也没有见官方将其合并进来。所以，目前是没办法指望官方发布了。

具体PR见：https://github.com/ElemeFE/element/pull/21572

如果你要让官方发布，只能用element-plus的2.8或以上版本。但是得配套vue3一起用。

plus版支持年份选择：https://element-plus.org/zh-CN/component/date-picker.html

二、如何在vue2+elementUI中添加年份选择

方案一：改写elementUI的源代码或者依赖包

步骤如下：

1、到如下地址下载打包编译后的代码

bash 复制代码

链接：https://pan.baidu.com/s/1tVrqVs9sycDyhIDB6l1dmQ
提取码：25h6

2、

如果你是用按需引入的方式使用的elementUI，那么可以将下方链接中lib\date-picker.js文件，替换到node_modules\element-ui\lib\date-picker.js的同名文件；要是全局引用的可以将下方链接中lib\element-ui.common.js文件，替换到node_modules\element-ui\lib\element-ui.common.js的同名文件。

要修改element-ui源码的程序员，可以将未编译的源码，下方链接中

package\date-picker.js文件，在element-dev\packages\date-picker\src\picker\date-picker.js下替换

package\year-range.vue文件，在element-dev\packages\date-picker\src\panel\year-range.vue下替换；

package\year-table.vue文件，在element-dev\packages\date-picker\src\basic\year-table.vue下替换；

package\picker.vue文件，在element-dev\packages\date-picker\src\picker.vue下替换

3、以上步骤相当于是将代码合并到elementUI的依赖包了。就可以直接在项目中通过type="yearrange"使用

vue 复制代码

<el-date-picker
   v-model="value"
    type="yearrange"
    unlink-panels
    value-format='yyyy'>
</el-date-picker>

4、添加如下样式，确保UI的一致性

css 复制代码

<!--为yearrange写的样式-->
<style scoped lang="scss">
.el-year-table::v-deep {
  td {
    padding: 8px 0;

    div {
      height: 48px;
      padding: 6px 0;
      box-sizing: border-box;
      .cell {
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
      }
    }

    &.start-date div {
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
    }

    &.end-date div {
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
    }

    &.in-range div {
      background-color: #f2f6fc;
    }

    &.start-date, &.end-date {
      .cell {
        color: #fff;
        background-color: #409eff;
      }
    }

    &.today.start-date, &.today.end-date {
      .cell {
        color: #fff;
      }
    }
  }
}
</style>

参考链接：https://blog.csdn.net/qq_43157849/article/details/123559707

这种方式修改起来比较简单，也能在npm run build后保留年份选择功能。

但是缺点是，一旦依赖包删除了，就得重新复制替换一遍。这个要是在多人协作开发就显得不方便了。可以参考方案二。

方案二：抽离出年份控件组件

步骤：

1、到如下地址下载组件到本地

bash 复制代码

https://gitee.com/q1f2/element_yearrange

2、将date-picker放到项目的components中，当做组件使用

3、到main.js中注册该组件为全局组件

js 复制代码

import DatePicker from "@/components/date-picker/src/date-picker" // 新增年份日期控件
Vue.component(DatePicker.name, DatePicker)

如果你想改组件的名字，比如将DatePicker改为DateYearPicker，可以打开date-picker.js，修改name名为 "DateYearPicker"

4、使用组件

到任意需要的地方，使用该组件，因为是全局注册了，所以不需要再import.

vue 复制代码

<date-picker
             type="yearrange"
             v-model="value1"
             value-format="yyyy"
             range-separator="至"
             start-placeholder="开始年份"
             end-placeholder="结束年份"
             >
</date-picker>
 
 <script>
 
    data() {
      return {
        value1: ''
      }
    }
</script>

组件样式为橙色，如果风格不喜欢，想改为elementUI默认的配色。可将方案1的css样式，复制替换到date-picker\src\year-table.vue的style中，原本的样式就不要了。

参考地址：https://blog.csdn.net/biuber/article/details/121639739

总结：这种方式的优点是能一劳永逸，即使删除依赖包也不影响功能使用。

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。

免费答疑，行业深潜多年的技术牛人帮你解决bug。

并可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务。

祝你能成为一名优秀的WEB前端开发工程师！