element el-date-picker 自定义半年选择器、旬选择器

先上图

半年选择器

<el-date-picker
            :append-to-body="false"
            v-model="dateSixMonth"
            type="month"
            value-format="yyyy-MM"
            placeholder="选择半年"
            popper-class="date-picker-six"
            :format="baseHarfYear"
            @change="
              (val) => {
                changeQueryMonth(val, 'harfYear');
              }
            "     
          />

data(){
  return{
	  dateSixMonth: "", // 半年日期
      baseHarfYear:'',//绑定回显半年
	}
}
//  对应方法
    //  半年选择器
    changeQueryMonth(time,type){
      return this.formatHarfYearTime(time, type);
    },
    /** 格式化半年 */
    formatHarfYearTime(time, type) {
      const date = new Date(time);
      const year = date.getFullYear();
      const m = date.getMonth() + 1;
      if (m <= 6) {
        this.baseHarfYear = `${year}年：上半年`
      } else {
        this.baseHarfYear = `${year}年：下半年`
      }
    },

//  半年
/deep/ .date-picker-six .el-picker-panel__body-wrapper .el-picker-panel__content .el-month-table tbody{
  tr:nth-of-type(1)  {
    background: rgb(153, 211, 238);
  }
  tr:nth-of-type(2){
    td:nth-of-type(1),td:nth-of-type(2) {
      background: rgb(153, 211, 238);
    }
    td:nth-of-type(3),td:nth-of-type(4) {
      background: rgb(219, 213, 160);
    }
  }
  tr:nth-of-type(3)  {
    background: rgb(219, 213, 160);
  }
}

很简单的逻辑：el-date-picker 绑定变量dateSixMonth，value-format控制值为例：2024-05，format绑定文本框显示的值BaseHarfYear，formatHarfYearTime()控制BaseHarfYear展示文本；css控制第一行、第三行变色，第二行前两个跟着第一行一个色，后两个同第三行。
注意：1、type=“month” 2、:append-to-body="false"最好加上，不然写在scoped没效果

旬选择器

    <el-date-picker
            :append-to-body="false"
            v-model="dateXun"
            type="date"
            popper-class="date-picker-xun"
            placeholder="选择旬"
            :picker-options="pickerOptions"
            :format="baseXun"
            value-format="yyyy-MM-dd"
            @change="
              (val) => {
                changeQueryDate(val, 'dateXun');
              }
            "
          />

  	dateXun: "", // 旬日期
    baseXun: "", // 绑定回显旬字段
	pickerOptions: {
        cellClassName: this.setXunClass,
    },	
	 /** 旬选择器 */
    changeQueryDate(time, type) {
      return this.formatTendayDate(time, type)
    },
    /** 格式化旬 */
    formatTendayDate(time, query) {
      const date = new Date(time);
      const year = date.getFullYear();
      const m = date.getMonth() + 1;
      const month = m > 9 ? m : "0" + m;
      const day = date.getDate();
      if (day <= 10) {
         	this.baseXun= `${year}年${month}月：上旬`
      } else if (day > 10 && day <= 20) {
     		this.baseXun= `${year}年${month}月：中旬`
      } else {
     		this.baseXun= `${year}年${month}月：下旬`
      }
    },
    /** 上中下旬添加不同class */
    setXunClass(date) {
      let newDate = new Date(date);
      let day = newDate.getDate();
      if (day < 11) {
        return "top-xun";
      } else if (day < 21) {
        return "mid-xun";
      } else {
        return "bot-xun";
      }
    },

/deep/ .el-date-picker {
  .top-xun {
    background-color: rgb(152, 211, 238);
    color: #333;
  }
  .mid-xun {
    background-color: rgb(211, 224, 218);
    color: #333;
  }
  .bot-xun {
    background-color: rgb(219, 213, 160);
    color: #333;
  }
}
/deep/ .date-picker-xun .el-date-table{
  td.prev-month,td.next-month {
    background-color: #fff !important;
  }
} 

注意：旬用的type=“date”，可能是我element版本太老的事v2.15， picker-options cellClassName只在type="date"能用，month没找到能用的,所以上面的半年选择器只能用css做文章。

有用就请点个赞吧