【vue + elementUI + el-date-picker + jq】el-date-picker type=“daterange“ 日期范围选择组件隐藏组件年份

最终效果

关键逻辑

获得组件的顶部标题元素的文本内容,
将文本内容赋值给自定义元素data-attr,
css将data-attr赋值给伪类::before，伪类::before定位覆盖在原标题上,用户看到的是新加的伪类::before

ps: 直接修改标题文本会导致切换月份时文本不会刷新

<el-date-picker v-model="xxx" :picker-options="pickerOptionsWeek" popper-class="my-datepicker" format="MM-dd" 
	type="daterange" default-value="2000/01/01" @focus="formDataFocus" unlink-panels></el-date-picker>

data() {
  return {
    pickerOptionsWeek: { // 时间禁用，将可选择范围限制在一年内，并且是一个闰年，可以选中2月29号
      disabledDate(time) {
        return time.getFullYear() !== 2000; // 判断不是指定年份禁用
      },
    },
  };
},

formDataFocus(e) {//隐藏日期选择组件头部的年份
  this.$nextTick(() => {
    if ($('.my-datepicker') && $('.my-datepicker').find('.el-date-range-picker__header')) {
      let divHtml = $('.my-datepicker').find('.el-date-range-picker__header').find('div')//获取到标题文本元素
      divHtml.eq(0).addClass('icon-left')//给左侧标题文本元素 加一个类名 
      divHtml.eq(0).attr('data-attr', divHtml.eq(0).html().split("年")[1])//将文本赋值给自定义属性data-attr

      divHtml.eq(1).addClass('icon-right')//给右侧标题文本元素 加一个类名 
      divHtml.eq(1).attr('data-attr', divHtml.eq(1).html().split("年")[1])//将文本赋值给自定义属性data-attr
    }
    // 月份切换按钮点击事件监听
    $('.el-picker-panel__icon-btn').click(function () {
      if ($('.my-datepicker') && $('.my-datepicker').find('.el-date-range-picker__header')) {
        let divHtml = $('.my-datepicker').find('.el-date-range-picker__header').find('div')
        // divHtml.eq(1).text(divHtml.eq(1).html().split("年")[1]) 直接修改文本,会导致切换月份后,文本不更新
        divHtml.eq(0).addClass('icon-left')//给左侧标题文本元素 加一个类名 
        divHtml.eq(0).attr('data-attr', divHtml.eq(0).html().split("年")[1])//将文本赋值给自定义属性data-attr

        divHtml.eq(1).addClass('icon-right')//给右侧标题文本元素 加一个类名 
        divHtml.eq(1).attr('data-attr', divHtml.eq(1).html().split("年")[1])//将文本赋值给自定义属性data-attr
      }
    })
  })
},

<style>
.my-datepicker .el-icon-d-arrow-left,
.my-datepicker .el-icon-d-arrow-right {
  /* 隐藏日期组件的年份切换图标 */
  display: none;
}
.my-datepicker .icon-left::before,
.my-datepicker .icon-right::before {
  /* 隐藏日期选择组件头部的年份 */
  content: attr(data-attr);/* 关键代码 将自定义属性data-attr内容赋值给伪类*/
  background-color: white;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 12.5rem;
}
</style>

点击这里查看 参考文档,使用原生js实现