横向日期组件

要求：

1.样式：如图 

2.点击向右图标，获取下15天日期；点击向左图标，获取上15天日期，今天背景色为橘色1，点击某天日期背景色为蓝色，已填报日期为绿色

3.今天之后的日期不能被点击，5月，2024年这种也不能点击

代码如下：

1.使用组件：

父组件：fillDateList为已填报的日期数组集合，getCheckDate方法可获取为所点击的日期

<HorizontalDate
     :fillDateList="fillDateList"
     @getCheckDate="getCheckDate"
     class="topDate"
 />

子组件：

<template>
  <div class="bg-[#fff] w-[80%] h-[60px] container">
    <div class="flex justify-start align-center w-full h-full">
      <div
        class="borderClass flex justify-center align-center w-[30px]"
        style="align-items: center"
      >
        <i
          class="fks-icon-arrow-left"
          style="font-size: 40px; font-weight: 900"
          @click="arrowClick('prev')"
        ></i>
      </div>
      <div
        class="dateClass borderClass w-[70px] flex justify-center align-center"
        style="align-items: center"
        v-for="(item, index) in dateList"
        :key="index + item"
        :class="getStyleByDate(item)"
        @click="handleDateClick(item)"
      >
        <div class="flex flex-col justify-center align-center">
          <span class="mb-[5px]">{{ item | formatMonth }}</span>
          <span class="text-[20px]">{{ item | formatDate }}</span>
        </div>
      </div>
      <div
        class="borderClass lastClass flex justify-center align-center w-[30px]"
        style="align-items: center"
      >
        <i
          class="fks-icon-arrow-right"
          style="font-size: 40px; font-weight: 900"
          @click="arrowClick('next')"
        ></i>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      dateList: [],
      // 当前选中日期
      currentSelectDate: "",
    };
  },
  props: {
    fillDateList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  mounted() {
    this.init();
  },
  filters: {
    formatMonth(value){
      if (value.length < 10) {
        return '';
      } else {
        return dayjs(value).format("MM月");
      }
    },
    formatDate(value) {
      if (value.length < 10) {
        return value;
      } else {
        return dayjs(value).format("DD日");
      }
    },
  },
  methods: {
    // 获取最近十五天的日期列表
    init() {
      const dateList = [];
      const now = dayjs();
      for (let i = 1; i < 8; i++) {
        const date = now.clone().subtract(i, "day").format("YYYY-MM-DD");
        dateList.push(date);
      }
      for (let i = 0; i < 8; i++) {
        const date = now.clone().add(i, "day").format("YYYY-MM-DD");
        dateList.push(date);
      }
      this.handleDateList(dateList);
    },
    // 箭头点击
    arrowClick(type) {
      let start = "";
      const arr = [];
      let index = 0;
      if (type === "next") {
        //2024年4月20日，长度为10，不能去最后一个和第一个，因为可能是2月，2024年这种，就不能取到下15天或者上15天了
        index = this.dateList.findLastIndex((item) => item.length === 10);
      } else {
        index = this.dateList.findIndex((item) => item.length === 10);
      }
      start = this.dateList[index];
      for (let i = 1; i < 16; i++) {
        if (type === "next") {
          const date = dayjs(start).add(i, "days").format("YYYY-MM-DD");
          arr.push(date);
        } else {
          const date = dayjs(start).subtract(i, "day").format("YYYY-MM-DD");
          arr.push(date);
        }
      }
      this.handleDateList(arr);
    },
    // 处理日期
    handleDateList(list) {
      list = list.sort((a, b) => new Date(a) - new Date(b));
      const arr = [];
      // 判断是为月的最后一天 年的最后一天
      list.forEach((item) => {
        arr.push(item);
        const lastMonthDay = dayjs(item).endOf("month").format("YYYY-MM-DD");
        const lastYearDay = dayjs(item).endOf("year").format("YYYY-MM-DD");
        if (lastYearDay === item) {
          let year = dayjs(item).format("YYYY");
          year = Number(year) + 1;
          arr.push(`${year}`);
        }
        if (lastMonthDay === item) {
          let month = dayjs(item).format("MM");
          month = Number(month) + 1;
          arr.push(`${month === 13 ? 1 : month}月`);
        }
      });
      this.dateList = arr;
    },
    getStyleByDate(date) {
      let spanClass = "";
      // 判断是否为今天
      const today = dayjs().format("YYYY-MM-DD");
      if (date === today && date !== this.currentSelectDate) {
        spanClass = "toDayClass";
      } else if (date === this.currentSelectDate) {
        spanClass = "clickClass";
      } else if (this.fillDateList.includes(date)) {
        spanClass = "fillClass";
      }
      return spanClass;
    },
    handleDateClick(date) {
      if (date.length < 10) return
      const todayDate = dayjs().format("YYYY-MM-DD");
      const todayTimes = new Date(todayDate)
      const currentTimes = new Date(date)
      if(todayTimes >= currentTimes){
        this.currentSelectDate = date;
        this.$emit("getCheckDate", date);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .borderClass {
    border: 1px solid #000;
    border-right: 0;
  }
  .lastClass {
    border: 1px solid #000;
  }
  .dateClass:hover {
    cursor: pointer;
  }
  .toDayClass {
    background: #eaab85;
  }
  .clickClass {
    background: #435bc8;
    color: white;
  }
  .fillClass {
    background: #74ba68;
  }
}
</style>