前端使用原生幾十行代碼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")

得到的結果如下圖