获取一个月有几周,按周返回数据

项目场景：

项目中需要实现一个周日历的功能,点击第几周展示每周对应的数据,通过dayjs进行封装实现获取一个月中每周的数据

功能流程

1. 根据输入的时间,利用dayjs获取每月第一天及最后一天
2. 在whlie循环中使用isBefore方法,生成月数据,
3. 通过dayjs中的day()方法获取星期,根据星期添加日历中上月天数
4. 日历中下月天数通过 42减去dayjs中daysInMonth()方法加上月天数
5. 通过moment格式化日期进行格式化处理
6. 将已有数据通过forEach处理,根据索引将数据按周分配

使用注意事项

使用前，请注意项目中是否已经下载了 dayjs

npm install dayjs

数据结构说明

每一条记录（对象）包含以下三个属性：

1. day： 一个 dayjs 日期对象，可以用来获取该日期的相关时间信息。例如，可以使用 day.format() 方法来格式化日期字符串，或者使用其他 dayjs 提供的方法来进行日期计算和比较。
2. isMonth： 一个布尔值，表示该日期是否属于当前月份。如果该日期属于当前月份，则值为 true；否则为 false。这个属性可以帮助你在显示或处理数据时过滤出特定月份的数据。
3. id：当条记录中的日期。它是一个字符串，格式为 "YYYY-MM-DD"，可以当做列表唯一标识符，在列表循环时作为key使用

代码实现

/**
 * e 指定的日期 格式：YYYY-MM，必填
 * isWeek：true 按月返回；false 按周返回
 */
const getMonth = (
  e,
  isMonth = true,
): getMonthProps[] | getMonthProps[][] => {
  const startDay = dayjs(e).startOf("month");
  const endDay = dayjs(e).endOf("month");
  let list = [];

  let currentDay = startDay;
  while (currentDay.isBefore(endDay)) {
    list.push({
      day: currentDay,
      isMonth: true,
      id: currentDay.format("YYYY-MM-DD"),
    });
    currentDay = currentDay.add(1, "day");
  }

  //上个月补充
  let week = list[0].day.day();
  if (week == 0) {
    week = 7;
  }
  for (let i = 1; i < week; i++) {
    //isMonth:区分是否是本月数据
    list.unshift({
      day: startDay.add(-i, "day"),
      isMonth: false,
      id: startDay.add(-i, "day").format("YYYY-MM-DD"),
    });
  }
  //下个月补充
  let nextWeek = 42 - (dayjs(e).daysInMonth() + week - 1);
  for (let i = 1; i <= nextWeek; i++) {
    //isMonth:区分是否是本月数据
    list.push({
      day: endDay.add(i, "day"),
      isMonth: false,
      id: endDay.add(i, "day").format("YYYY-MM-DD"),
    });
  }

  if (isMonth) {
    return list;
  } else {
    // 每月周数据处理
    let arr = [];
    let currentSublist = [];

    list.forEach((item, index) => {
      currentSublist.push(item);

      if ((index + 1) % 7 === 0 || index === list.length - 1) {
        if (currentSublist.length > 0) {
          arr.push(currentSublist);
        }
        currentSublist = [];
      }
    });

    return arr;
  }
};

效果展示