首先通过屏蔽日期面板的的年份切换图标。这里需要注意一下需要将append-to-body属性设置为false，不然代码不会生效。

::v-deep .el-icon-d-arrow-left:before {
  content: none;
::v-deep .el-icon-d-arrow-right:before {
  content: none;
这样就禁止用户可以直接切换年份了，但是因为保留了月份切换，用户仍可以通过连续点击切换到其他年份，这时候我们可以通过picker-options属性自定义禁用，这里我是通过判断是否是当前年份，不是的话就禁用时间选择。
 
// 时间禁用
pickerOptionsWeek: {
  disabledDate(time) {
    return time.getFullYear() !== new Date().getFullYear(); // 判断不是当前年份即禁用
之后就是比较烦的了，没有其他好的思路，我是通过获取面板标题的innerHTML值，并截取获得月份和天，之后给标题的div动态的绑定了自定义的class，并把截取活动的值动态绑定给class::before，最后通过修改::before的样式覆盖原本的内容。具体代码如下：
 
首先给DatePicker组件设置一个class，方便去读到标题的元素节点，然后设置focus事件，在面板打开的时候进行顶部标题的格式化，同时为所有的月份切换绑定监听事件：
 
    /** 监听datepicker获取焦点 */
    formDataTime1(e) {
      // if (this.formData.timeType === '2') {
        this.$nextTick(() => {
          this.watchDate() // 格式化面板标题
          // 通过循环为月份切换按钮添加监听事件
          document.querySelectorAll("[class='el-picker-panel__icon-btn el-icon-arrow-left'],[class='el-picker-panel__icon-btn el-icon-arrow-right'],[class='el-picker-panel__icon-btn el-icon-arrow-left is-disable'],[class='el-picker-panel__icon-btn el-icon-arrow-right is-disable']")
            .forEach(item => item.addEventListener('click', () => {
              this.watchDate()  // 格式化面板标题
    /** 格式化面板标题 */
    watchDate() {
      // 判断datePicker是否存在
      if (document.getElementsByClassName("datePicker")[0]) {
        // 通过类型找到日期选择的面板元素
        let divHtml = document.getElementsByClassName("datePicker")[0].lastChild.getElementsByClassName("el-picker-panel__body-wrapper")[0].lastChild.getElementsByClassName("el-picker-panel__content");
        // 获取标题元素
        let divContent1 = divHtml[0].getElementsByClassName("el-date-range-picker__header")[0];
        let divContent2 = divHtml[1].getElementsByClassName("el-date-range-picker__header")[0];
        // 对元素进行判断并重新赋值
        if (divContent1.lastChild.innerHTML.indexOf("年") != -1) {
          divContent1.lastChild.setAttribute("class","icon-left")
          divContent1.lastChild.setAttribute("data-attr","icon-left")
          divContent1.lastChild.setAttribute("data-attr",`${divContent1.lastChild.innerHTML.split("年")[1]}`)
          // divContent1.lastChild.innerHTML = divContent1.lastChild.innerHTML.split("年")[1]
        if (divContent2.lastChild.innerHTML.indexOf("年") != -1) {
          divContent2.lastChild.setAttribute("class","icon-right")
          divContent2.lastChild.setAttribute("data-attr","icon-right")
          divContent2.lastChild.setAttribute("data-attr",`${divContent2.lastChild.innerHTML.split("年")[1]}`)
          // divContent2.lastChild.innerHTML = divContent2.lastChild.innerHTML.split("年")[1]
/** 伪类 */
::v-deep .icon-left::before {
  content: attr(data-attr);
  background-color: white;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 12.5rem;
::v-deep .icon-right::before {
  content: attr(data-attr);
  background-color: white;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 12.5rem;
 监听事件里边的伪类赋值和修改是网上抄的HTML 5的data-属性，用法
 
（因为我的业务需求需要进行多个类型的DatePicker切换，但是element的日期选择面板在同一个类型的选择器之间是不会刷新的，也就是说我在进行年月日选择后切换到月日选择时对上个面板的修改是不会刷新的，只有将选择器切换成时间选择器后再切回来面板才会刷新，这个就需要在切换的时候手动重新挂载一边面板：给组件设置ref，通过this.$refs.datePicker.mountPicker()重新挂载面板，这样面板就可以在同类选择器切换时进行刷新了。还有就是因为每次重新挂载的原因，原本通过popper-class属性给面板设置类名会失效才直接给组件设置类名的）；
 
    timeSelectChange() {
      this.$refs.datePicker.mountPicker();
                  <el-date-picker
                    unlink-panels
                    :append-to-body="false"
                    ref="datePicker"
                    @focus="formDataTime1"
                    :picker-options="pickerOptionsWeek"
                    class="datePicker"
                    v-model="formData.time"
                    format="MM 月 dd 日"
                    value-format="MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
 
  data() {
    return {
      // 时间禁用
      pickerOptionsWeek: {
        disabledDate(time) {
          return time.getFullYear() !== new Date().getFullYear(); // 判断不是当前年份即禁用
    /** 格式化面板标题 */
    watchDate() {
      // 判断datePicker是否存在
      if (document.getElementsByClassName("datePicker")[0]) {
        // 通过类型找到日期选择的面板元素
        let divHtml = document.getElementsByClassName("datePicker")[0].lastChild.getElementsByClassName("el-picker-panel__body-wrapper")[0].lastChild.getElementsByClassName("el-picker-panel__content");
        // 获取标题元素
        let divContent1 = divHtml[0].getElementsByClassName("el-date-range-picker__header")[0];
        let divContent2 = divHtml[1].getElementsByClassName("el-date-range-picker__header")[0];
        // 对元素进行判断并重新赋值
        if (divContent1.lastChild.innerHTML.indexOf("年") != -1) {
          divContent1.lastChild.setAttribute("class","icon-left")
          divContent1.lastChild.setAttribute("data-attr","icon-left")
          divContent1.lastChild.setAttribute("data-attr",`${divContent1.lastChild.innerHTML.split("年")[1]}`)
          // divContent1.lastChild.innerHTML = divContent1.lastChild.innerHTML.split("年")[1]
        if (divContent2.lastChild.innerHTML.indexOf("年") != -1) {
          divContent2.lastChild.setAttribute("class","icon-right")
          divContent2.lastChild.setAttribute("data-attr","icon-right")
          divContent2.lastChild.setAttribute("data-attr",`${divContent2.lastChild.innerHTML.split("年")[1]}`)
          // divContent2.lastChild.innerHTML = divContent2.lastChild.innerHTML.split("年")[1]
    /** 监听datepicker获取焦点 */
    formDataTime1(e) {
      if (this.formData.timeType === '2') {
        this.$nextTick(() => {
          this.watchDate() // 格式化面板标题
          // 通过循环为月份切换按钮添加监听事件
          document.querySelectorAll("[class='el-picker-panel__icon-btn el-icon-arrow-left'],[class='el-picker-panel__icon-btn el-icon-arrow-right']")
            .forEach(item => item.addEventListener('click', () => {
              this.watchDate()  // 格式化面板标题
::v-deep .el-icon-d-arrow-left:before {
  content: none;
::v-deep .el-icon-d-arrow-right:before {
  content: none;
/** 伪类 */
::v-deep .icon-left::before {
  content: attr(data-attr);
  background-color: white;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 12.5rem;
::v-deep .icon-right::before {
  content: attr(data-attr);
  background-color: white;
  position: absolute;
  top: 0;
  left: 3rem;
  width: 12.5rem;
                    首先通过屏蔽日期面板的的年份切换图标。这里需要注意一下需要将append-to-body属性设置为false，不然代码不会生效。这样就禁止用户可以直接切换年份了，但是因为保留了月份切换，用户仍可以通过连续点击切换到其他年份，这时候我们可以通过picker-options属性自定义禁用，这里我是通过判断是否是当前年份，不是的话就禁用时间选择。
				
首先，在选用 ElementUI 关于时间的选择器时，通常会设置 今天之后的时间不可选 或者 今天之前的时间不可选 等其他关于时间限制的需求。
那么参考相关文章和官方文档之后，我们可以知道，我们需要使用 picker-options 里的 disabledDate 去对其进行限制。在这里，参考的文章如下：
【ElementUI】日期选择器时间选择范围限制，根据接口灵活设置可选时间。只能选今天之前的时间，或者是只能选今天之后的时间。今天是否可以选。限制结束日期不能大于开始日期
同样的一句话，咋就遇到问
				
Element UI 提供了一个名为 "DatePicker" 的组件，可以用来选择年份。您可以通过设置 `type` 属性为 "year" 来将日期选择器变成年份选择器。
以下是一个使用年份选择的示例代码：
```html
<template>
    <el-date-picker
      v-model="year"
      type="year"
      placeholder="请选择年份">
    </el-date-picker>
</template>
<script>
export default {
  data() {
    return {
      year: null
</script>
在上述示例中，我们使用了 `el-date-picker` 组件，并将 `type` 属性设置为 "year"，以获取年份选择器。您可以根据需要自定义其他属性和样式来适配您的项目。
希望这对您有所帮助！如果还有其他问题，请随时提问。