使用js模拟日历数据的生成(使用js获取某一天所在的星期日到星期六的数据)

361 阅读1分钟

因为近期开发项目遇到了一个需求。当客户选择了某一天,就显示对应的这个星期的天数,

例:如我选择了04号,则需要显示这样一个数据:

屏幕截图 2023-02-17 235251.png

但是很多组件似乎并没有能获得这种效果的相关代码,

但是项目又需要,于是,我准备琢磨着,自己写一个。

观察win10系统自带的日历,发现了日历的组成部分,一页是由六个星期组成的。

日历.png

那么我们可以以此,来简单进行模拟一下日历的结构。

所以我编写了这个js代码,它可以获取传入的日期所在的星期日到星期六的数据。

而一个日历是由六个星期组成的,由此,我们只需要循环六次这个方法,便可获得一页日历的数据

//获取这周的时间数据

    getWeek(time=2023-02-17) {

      const dateTime = new Date(time);

      const Date2 = dateTime.getTime(); //毫秒数

      const weekList = new Array(6); //放置周数据

      const day2week = ["日", "一", "二", "三", "四", "五", "六"]; 

      const week = dateTime.getDay(); //获取传入的time日期为星期几

      const dayTime = 3600 * 24 * 1000; //一天的毫秒数

      for (let i = 0; i <= 6; i++) {

        weekList[i] = {

          label: day2week[i],

          day: new Date(Date2 - (week - i) * dayTime).getDate(),

          select: (week - i) * dayTime === 0,

        };

      }
      return weekList;

    }