el-date-picker 日期过滤周末节假日

// An highlighted block
// 封装日历组件
<el-date-picker
    clearable
    :picker-options="pickerOptions" // pickerOptions 改变日期
    format="yyyy 第 WW 周"
    style="width: 100%;"
    :placeholder="`请选择${item.placeholder || item.label}`"
     v-bind="item.props"
     :type="item.typeDate"  // 显示日周月
     v-if="item.type === 'weekpicker'" // 显示周
     v-model="formAdd[item.value]"
/>

// 方法
computed: {
    pickerOptions() {
      return {
        // 法定节假日日期不可选
        disabledDate: time => {
          for (var i = 0; i < HOLIDAY.length; i++) {
            if (time.getTime() === new Date(HOLIDAY[i]).getTime()) {
              return true
            }
          }
          if (time.getDay() === 0 || time.getDay() === 6) {
            // 返回日期中表示周几的数值（0 表示周日，6 表示周六）
            return '#'
          } else {
           // 今日之前的日期不可选
            let tempTime = 3600 * 1000 * 24
            return time.getTime() < new Date() - tempTime
          }
        },
        //修改法定节假日期的样式
        cellClassName: time => {
          for (var i = 0; i < HOLIDAY.length; i++) {
            if (time.getTime() === new Date(HOLIDAY[i]).getTime()) {
              return 'x-hd'
            }
          }
        }
      }
    },
    openDialogVisible: {
      get() {
        return this.DialogVisible
      },
      set(val) {
        console.log(this.formAdd, 'set')
        this.$emit('update:DialogVisible', val) // openDialogVisible改变的时候通知父组件
      }
    }
  }
// 引入节假日日期
import { HOLIDAY } from '@/plugins/holiday.js'
// 2022 年节假日
export const HOLIDAY = [
  '2022/04/03',
  '2022/04/04',
  '2022/04/05',
  '2022/04/30',
  '2022/05/01',
  '2022/05/02',
  '2022/05/03',
  '2022/05/04',
  '2022/06/03',
  '2022/06/04',
  '2022/06/05',
  '2022/09/10',
  '2022/09/11',
  '2022/09/12',
  '2022/10/01',
  '2022/10/02',
  '2022/10/03',
  '2022/10/04',
  '2022/10/05',
  '2022/10/06',
  '2022/10/07'
]

/* 日历修改样式 要放在全局调用 不然不生效*/
.x-hd div span {
  color: #f56c6c !important;
  border: 1px solid #f56c6c;
  border-radius: 50%;
}

最终效果：