获取一个月有多少天,生成日历

项目场景：

项目中需要实现一个月日历的功能,通过dayjs进行封装实现获取一个月共有多少天,通过获取到的数据渲染生成日历

功能流程

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

使用注意事项

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

npm install dayjs

数据结构说明

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

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

代码实现

  //e 指定的日期 格式：YYYY-MM
  const getMonth = e => {
    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: endDay.add(i, "day").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++) {
       // ishow:区分是否是本月日期
      list.unshift({ day: startDay.add(-i, 'day'),isShow:false,  id: endDay.add(i, "day").format("YYYY-MM-DD"), });
    }
    
   //下个月补充   42:日历中的六周 * 一周七天
    let nextWeek = 42 - (dayjs(e).daysInMonth() + week - 1);
    for (let i = 1; i <= nextWeek; i++) {
       // ishow:区分是否是本月日期
      list.push({ day: endDay.add(i, 'day'), isMonth: false,  id: endDay.add(i, "day").format("YYYY-MM-DD"), })
    }

    console.log(list)
    return list
  };

效果展示