由於專案的需求，需要實現一個只顯示一週日期的日曆元件，點選下一週或上一週按鈕顯示上/下一週的日期。這裡只實現了js的部分，介面部分大家可以自己去實現一下。

具體實現程式碼如下：

export default class Calendar {
  constructor () {
    this.currentWeekFirst = null
  }

  /**
   * 獲取以一週為單位得日期
   * @param {*} date 時間戳
   */
  _setDate (date) {
    let weekList = [] // 周列表
    let passed = date.getDay() - 1
    let _date = this._addDate(date, passed * -1) // 獲取週一的時間
    this.currentWeekFirst = new Date(_date)
    for (let i = 0; i < 7; i++) {
      let _ = this.format(i === 0 ? _date : this._addDate(_date, 1))
      weekList.push(_)
    }
    return weekList
  }

  /**
   * 增加時間
   * @param {*} date 時間戳
   * @param {*} n 天數
   */
  _addDate (date, n) {
    return new Date(date.setDate(date.getDate() + n))
  }

  /**
   * 獲取本週日期
   * @param {*} date 時間戳
   */
  ThisWeek (date) {
    return this._setDate(date)
  }

  /**
   * 上星期
   */
  prev () {
    return this._setDate(this._addDate(this.currentWeekFirst, -7))
  }

  /**
   * 下星期
   */
  next () {
    return this._setDate(this._addDate(this.currentWeekFirst, 7))
  }

  /**
   * 格式化年月日，以/隔開
   * @param {*} date 時間戳
   */
  format (date) {
    let year = date.getFullYear().toString().slice(2, 4)
    let month = (date.getMonth() + 1).toString()
    let day = date.getDate().toString()
    let w = date.getDay()
    let week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][w] + ' '
    return week + [year, month, day].map(item => item[1] ? item : '0' + item).join('/')
  }
}
 

哈哈，寫的不好，讀者還有更好的方法可以在下面評論，我們一起學習交流交流，歡迎大家評論。。。。。