純手敲日曆組件（vue）

日曆組件

先看效果圖，以下：在線預覽

背景介紹：pc端需求，作一個日曆組件，能夠在上面添加日程。固然這裏業務功能部分就沒有寫，你們只可參考日曆的實現便可。

核心代碼介紹

根據vue的核心思想：數據驅動來生成所須要的數據，實現頁面的自動渲染及更新。

• 組裝日期核心對象calendarData 看到這個圖，第一個想到的是要生成每一個月的全部天數，而後還有各個狀態：

即默認當天日期（圖中默認藍色數字）、選中日期（點擊背景藍色）、不可選的日期（灰色字體）及（有日程的等）及樣式。
複製代碼

• 生成日期對象：

// 初始化日曆
 // isClickToday參數只是爲了處理點擊「今天」的判斷
    initCalendar(isClickToday = false) {
      const nowDate = new Date()
      this.viewDate(nowDate, isClickToday)
    },
    // 初始化日期控件
    viewDate(nowDate, isClickToday = false) {
      this.currentShowDate = Utility.formatDate(nowDate, 'yyyyMMdd')
      const year = nowDate.getFullYear()
      const month = nowDate.getMonth() + 1
      const currentDate = nowDate.getDate()
      this.currentYear = year
      this.currentMonth = month
      let dayNum = 0 // 當前月有多少天
      if (month === 1 || month === 3 || month === 5 || month === 7 || month === 8 || month === 10 || month === 12) {
        dayNum = 31
      } else if (month === 4 || month === 6 || month === 9 || month === 11) {
        dayNum = 30
      } else if (month === 2 && this.isLeapYear(year)) { // 若是是閏年，2月有29天
        dayNum = 29
      } else {
        dayNum = 28
      }
      this.calendarData = []
      var _firstDay = new Date(year, month - 1, 1) // 當前月第一天
      for (var i = 0; i < 42; i++) {
        let day = i + 1 - _firstDay.getDay() // 根據周幾計算
        let _thisDate = new Date(year, month - 1, day)
        let _thisMonth = _thisDate.getMonth() + 1
        let _thisDay = _thisDate.getDate()
        let _currentDate = Utility.formatDate(_thisDate, 'yyyy-MM-dd')
        let curentDay = {
          isCurrentMonth: _thisMonth === month, // 是不是當月時間,只有當月才能夠點擊和移動變色
          isCurrentDay: _thisDay === currentDate, // 是不是當月的當天
          isClick: false,
          value: _thisDay,
          month: _thisMonth,
          longStrDate: _currentDate.replace(/-/g, ''),
          currentDate: _currentDate,
          isHasData: false // 是否存在數據（處理業務邏輯時用）
        }
        this.calendarData.push(curentDay)
      }
      if (isClickToday) {
        let item = this.calendarData.find(d => d.isCurrentDay)
        this.$emit('changeDate', item.currentDate)
      }
    },
    // 判斷是否爲閏年
    isLeapYear(year) {
      if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
        return true
      } else {
        return false
      }
    },
    // 切換日期
    changeMonth(type) {
      let nowDate = new Date()
      let month = this.currentMonth
      if (type === 0) {
        month = this.currentMonth - 1
      } else {
        month = this.currentMonth + 1
      }
      nowDate.setFullYear(this.currentYear)
      nowDate.setMonth(month - 1)
      nowDate.setDate(nowDate.getDate())
      console.log('切換日期', nowDate)
      this.viewDate(nowDate)
      // 回調方法
      this.$emit('changeDate', Utility.formatDate(nowDate, 'yyyy-MM-dd'))
    },
    // 選中哪一天
    checkDate(item) {
      if (!item.isCurrentMonth) return
      this.calendarData.forEach(d => {
        // && !item.isCurrentDay 若是當天就不選中
        d.isClick = d.value === item.value && d.month === item.month
      })
      // 回調方法
      this.$emit('checkDay', item)
    },
    // 賦值具體日期
    checkDays(date) {
      this.viewDate(new Date(date))
    }
複製代碼

• 組件的使用：/views/calendar.vue

<cale-comp ref="calendar" @changeDate="changeDate" @checkDay="checkDay"></cale-comp>
複製代碼

詳細代碼可參考這裏.