基于element ui DatePicker组件实现yearrange

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

编译后的源码，element-ui是按需引用的可以将下方链接中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下替换

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

<!--为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>