el-date-picker日历显示节假日

el-date-picker是Element UI库中的一个日期选择器组件，用于在网页中选择日期。它可以显示节假日，但需要借助第三方库来实现。

要在el-date-picker中显示节假日，可以使用moment.js或者date-fns等日期处理库来获取节假日信息，并将其显示在日期选择器上。这些库提供了一些方法来判断某个日期是否是节假日，比如根据国家法定节假日规定进行计算。

以下是一个使用moment.js来显示节假日的示例代码：

<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      selectedDate: null,
      pickerOptions: {
        disabledDate: (date) => {
          // 判断是否是节假日，如果是则禁用该日期
          return isHoliday(date);
        },
        // 自定义日期面板的cell内容
        cellRender: (date) => {
          // 判断是否是节假日，如果是则添加特殊样式
          if (isHoliday(date)) {
            return `<div class="holiday">${date.date()}</div>`;
          } else {
            return `<div>${date.date()}</div>`;
          }
        },
      },
    };
  },
  methods: {
    isHoliday(date) {
      // 使用moment.js判断日期是否是节假日
      // 这里需要根据具体的国家和地区的法定节假日规定进行判断
      // 这里只是一个示例，具体的判断逻辑需要根据实际情况进行修改
      const year = date.year();
      const month = date.month() + 1;
      const day = date.date();
      // 假设1月1日和10月1日是节假日
      if ((month === 1 && day === 1) || (month === 10 && day === 1)) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style scoped>
.holiday {
  color: red;
}
</style>

在上述代码中，我们使用了moment.js来判断日期是否是节假日，并在日期选择器中禁用了节假日日期，并且为节假日日期添加了特殊样式。

请注意，这只是一个示例代码，具体的判断逻辑和节假日信息需要根据实际情况进行修改。你可以根据自己的需求来调整代码。