小程序日历功能实现

前言：之前想过写一下小程序的日历功能练练手，只是确实有些懒没怎么动手，最近项目有这方面的需求就花了小半天的时间实现了一下，总的来说并不复杂。
先看下接入项目前的日历样式：

屏幕快照 2019-03-22 下午3.24.24.png

其中灰色日期为上月日期或下月日期的显示，黑色日期为所选择的当月日期，红色日期为选择的当天日期；
功能：根据筛选的日期显示当月的日期信息，可点击，若选择了上月或下月的日期则进行日历列表的数据刷新；
话不多数，上代码：
总共三个文件calendarClass.js、calendarClass.wxml、calendarClass.wxss
calendarClass.wxml:

<view class='display-space-between'>
  <view></view>
  <view>{{calendarTitle}}</view>
  <view></view>
</view>

<view class='calendar-background display-space-between'>
  <view class='calendar-item' wx:for-items="{{weeks}}" wx:for-item="item" wx:key="*item">{{item}}</view>
  <view class='calendar-item {{item.current ? "":"text-gray"}} {{item.selected ? "text-red":""}}' wx:for-items="{{calendarDays}}" wx:for-item="item" wx:key="*item" wx:for-index="index" data-index='{{index}}' bindtap='clickDate'>{{item.date}}</view>

</view>

calendarClass.wxss:

.calendar-background {
  font-size: 24rpx;
  padding-top: 20rpx;
}

.calendar-item {
  width: 14%;
  height: 50rpx;
  text-align: center;
}

.display-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.text-gray {
  color: #878787;
}
.text-red {
  color: #F87474;
}

calendarClass.js（最重要的）：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    weeks: ["日", "一", "二", "三", "四", "五", "六"],

    // 所选择日期
    selectDate: {
      'year': new Date().getFullYear(),
      'month': new Date().getMonth() + 1,
      'date': new Date().getDate(),
    },

    calendarTitle: '',

    // 日期list 
    calendarDays: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    this.getMonthDaysCurrent(new Date())

  },


  // 所选时间对应月份日期
  getMonthDaysCurrent(e) {
    let year = e.getFullYear()
    let month = e.getMonth() + 1
    let date = e.getDate()
    let day = e.getDay() // 周几
    let days = new Date(year, month, 0).getDate() //当月天数(即下个月0号=当月最后一天)

    let firstDayDate = new Date(year, month - 1, 1) // 当月1号
    let firstDay = firstDayDate.getDay() //当月1号对应的星期

    let lastDate = new Date(year, month - 1, days) //当月最后一天日期
    let lastDay = lastDate.getDay() //当月最后一天对应的星期

    // 更新选择日期
    this.data.selectDate = {
      'year': year,
      'month': month,
      'date': date,
    }
    
    // 更新顶部显示日期
    this.setData({
      calendarTitle: year + "/" + (month > 9 ? month : "0" + month) + "/" + (date > 9 ? date : "0" + date)
    })

    let calendarDays = []

    // 上个月显示的天数及日期
    for (let i = firstDay - 1; i >= 0; i--) {
      let date = new Date(year, month - 1, -i)
      //console.log(date, date.getMonth() + 1)

      calendarDays.push({
        'year': date.getFullYear(),
        'month': date.getMonth() + 1,
        'date': date.getDate(),
        'day': date.getDay(),
        'current': false,
        'selected': false
      })
    }

    // 当月显示的日期
    for (let i = 1; i <= days; i++) {
      calendarDays.push({
        'year': year,
        'month': month,
        'date': i,
        'day': new Date(year, month - 1, i).getDay(),
        'current': true,
        'selected': i == date // 判断当前日期
      })
    }

    // 下个月显示的天数及日期
    for (let i = 1; i < 7 - lastDay; i++) {
      let date = new Date(year, month, i)
      //console.log(date, date.getMonth() + 1)

      calendarDays.push({
        'year': date.getFullYear(),
        'month': date.getMonth() + 1,
        'date': date.getDate(),
        'day': date.getDay(),
        'current': false,
        'selected': false
      })
    }

    this.setData({
      calendarDays: calendarDays
    })
  },

  // 手动选中日期
  clickDate(e) {
    let index = e.currentTarget.dataset.index
    let list = this.data.calendarDays
    for (let i = 0; i < list.length; i++) {
      list[i].selected = i == index
      if (i == index) {
        console.log(list[i], this.data.selectDate)
        // 如果选择日期不在当月范围内，则重新刷新日历数据
        if (list[i].year != this.data.selectDate.year || list[i].month != this.data.selectDate.month) {
          let date = new Date(list[i].year, list[i].month - 1, list[i].date)
          this.getMonthDaysCurrent(date)
          return
        }
        // 更新顶部显示日期
        this.setData({
          calendarTitle: list[i].year + "/" + (list[i].month > 9 ? list[i].month : "0" + list[i].month) + "/" + (list[i].date > 9 ? list[i].date : "0" + list[i].date)
        })
      }
    }
    
    this.setData({
      calendarDays: list
    })
  },

})