前端使用原生几十行代码js手写日历组件

只能传入每个月的一号，传入其他值会出现问题，到时做个判断即可

// 返回 类似 2016-01-02 格式的字符串
      formatDate: function(year, month, dateline) {
        let y = year;
        let m = month;
        if (m < 10) m = "0" + m;
        let d = dateline;
        if (d < 10) d = "0" + d;
        return y + "-" + m + "-" + d;
      },
      // 整理日历数据
      initData: function(cur) {
        let date;
        if (cur) {
          date = new Date(cur);
        } else {
          let now = new Date();
          let d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
          d.setDate(42);
          date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
        }
        this.newYear = date.getFullYear();
        this.newMonth = date.getMonth() + 1;
        this.newDay = date.getDate();
        this.newWeek = date.getDay(); // 1...6,0 取上个月还存有多少天，这里取的是这个月一号的getDay
        // eslint-disable-next-line
        if (this.newWeek == 0) {
          this.newWeek = 7;
        }
        let str = this.formatDate(
          this.newYear,
          this.newMonth,
          this.newDay
        );
        this.days.length = 0;
        // 获取上个月的时间
        for (let i = this.newWeek - 1; i >= 0; i--) {
          let d = new Date(str);
          d.setDate(d.getDate() - i); // setDate返回距离一号调整过的日期的毫秒 
          let dayObj = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性 --- 看自己实际情况而定
          dayObj.dateline = d;
          this.days.push(dayObj); // 将日期放入data 中的days数组 供页面渲染使用
        }
        // 获取本月以及下个月的时间
        for (let i = 1; i <= 42 - this.newWeek; i++) {
          let d = new Date(str);
          d.setDate(d.getDate() + i);
          let dayObj = {}; // 用一个对象包装Date对象  以便为以后预定功能添加属性 --- 看自己实际情况而定
          dayObj.dateline = d;
          this.days.push(dayObj);
        }
        this.days.sort((a, b) => {
          // 利用array的sort进行一个排序刚好利用时间戳把日期排序好
          console.log(
            a.dateline.getFullYear(),
            a.dateline.getMonth() + 1,
            a.dateline.getDate(),
            "-------",
            b.dateline.getFullYear(),
            b.dateline.getMonth() + 1,
            b.dateline.getDate()
          );
          return a.dateline.getTime() - b.dateline.getTime();
        });
        console.log(this.days);
      }

使用自己写好的js

this.initData("2020-05-01")

得到的结果如下图