?最近使用vue和原生Date對象api寫了一個(gè)日歷，具體樣式如下：

?由于是原生Date對象的api，所以需要封裝函數(shù)向前減或向后加number天

// 用來編輯日期，向前減或向后加number天
editDate(date, type = "add", number = 1) {
    const types = type === 'add' ? 1 : -1
    const dates = date.getDate()
    const newDate = new Date(date)
    newDate.setDate(dates + number * types)
    return newDate
}

?初始化一個(gè)數(shù)組用以保存每個(gè)日歷頁面的所有日期

// 初始化一個(gè)數(shù)據(jù)用來保存每頁日歷的所有日期天數(shù)
canlender = []

init(date = new Date()) {
    // 把當(dāng)前日期定位到一號
    const currentDate = new Date(date)
    currentDate.setDate(1)
        
        // 獲取當(dāng)前年月
    this.year = currentDate.getFullYear()
    this.month = currentDate.getMonth()

    // 獲取星期
    const currentWeek = currentDate.getDay()
        
        // 第一排放入一號的日期
        this.canlender.push({
        date: this.formatDate(currentDate),
        dateNum: currentDate.getDate()
    })


    // 根據(jù)一號的日期向前補(bǔ)齊
    for (let i = 0; i < currentWeek; i++) {
        const date = this.editDate(currentDate, 'sub', i + 1)
        this.canlender.unshift({
            date: this.formatDate(date),
            dateNum: date.getDate()
        })
    }

    // 根據(jù)一號日期向后補(bǔ)齊，總共放六周日期
    for (let i = 1; i < 42 - currentWeek; i++) {
        const date = this.editDate(currentDate, 'add', i)
        this.canlender.push({
            date: this.formatDate(date),
            dateNum: date.getDate()
        })
    }

}

?vue部分的代碼：

<template>
  <div class="canlender">
    <div class="title">
      <!--  上一月 -->
      <div class="left btn" @click="editMonth('sub')"></div>
      <div class="date-title">{{ dateFormat }}</div>
     <!--  下一月 -->
      <div class="right btn" @click="editMonth('add')"></div>
    </div>
    <!--  存放星期標(biāo)題 -->
    <div class="week-day">
      <div v-for="i in weekDay" :key="i">{{ i }}</div>
    </div>
    <!--  日期容器 -->
    <div class="date-container">
      <div v-for="item in canlender" :key="item.date">
        {{ item.dateNum }}
      </div>
    </div>
  </div>
</template>

// ...
// ...
<script>
  data() {
    return {
      msg: [],
      weekDay: ["日", "一", "二", "三", "四", "五", "六"],
      canlenderObj: null,
      canlender: [],
      currentDate: new Date(),
    };
  },

 methods: {
    // 切換到上一個(gè)月或者下一個(gè)月
    editMonth(type) {
      const num = type === "sub" ? -1 : 1;
      this.currentDate.setMonth(this.currentDate.getMonth() + num);
      // 清空canlender日期容器
      this.canlenderObj.clear();  
      // 重新生成canlender日期容器
      this.canlenderObj.init(this.currentDate);
      this.canlender = this.canlenderObj.canlender;
    },
  },
  computed: {
    dateFormat() {
      return this.canlenderObj
        ? this.canlenderObj.year + "年" + (this.canlenderObj.month + 1) + "月"
        : "";
    },
  },

</script>

?好啦，這樣一個(gè)簡單的日歷就完成啦

日歷.gif