TouchWX Calender代码注释

Dater.js

/**
 * 换算某月的上个月，下月，本月的月信息，日历写死展示42天，
 *     可以通过更改：
 *           var nextlen = 42 - (prem.length + getMonthDay[m - 1]); 42改成35
 *     上月和下月不显示数据可以可以注释掉相应月的赋值代码，修改此对象:
 *             this.monthDays = {
                  preMonthDays: prem,  //上月的天
                  thisMonthDays: im,   //本月的天
                  nextMonthDays: nextm, //下月的天
                  day: d,
                  month: m,
                  year: y
                }
 */
export default function Dater (y, m, d) {
  var date = new Date()

  // 获取年，月，天
  var y = y || date.getFullYear(),
    m = m || date.getMonth() + 1,
    d = d || date.getDate()

  // 是否为闰年，闰年能被4和400整除，不能被100整除  
  var isLeapYear = function (years) {
    return !!((years % 4 == 0 && years % 100 !== 0) || (years % 400 === 0))
  }

  // 获取月的一号是星期几， 0是星期日
  var getFirstDay = function (y, m, d) {
    var d = new Date(y, m, d)
    d.setDate(1)
    return d.getDay()
  }

  // 每月有多少天，一年12月的天数
  var getMonthDay = [31, isLeapYear(y) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  
  // prem 上月的天信息，im本月的天信息， nextm下个月的天信息， lastmd上个月的天数
  var prem = [], im = [], nextm = [], lastmd = getMonthDay[m - 1 - 1]

  //设置上月的天数信息
  // 该月的1号是不是周日，
  if (getFirstDay(y, m - 1, d) === 0) {
    for (var i = 6; i >= 0; i--) {
      prem[6 - i] = lastmd - i
    }
  } else {
    for (var i = getFirstDay(y, m - 1, d); i > 0; i--) {
      prem[getFirstDay(y, m - 1, d) - i] = lastmd - i + 1
    }
  }

  // 设置本月的天数信息
  for (var i = 0; i < getMonthDay[m - 1]; i++) {
    im[i] = i + 1
  }

  // 设置下月的天信息
  // 日历展示42天
  var nextlen = 42 - (prem.length + getMonthDay[m - 1])
  for (var i = 0; i < nextlen; i++) {
    nextm[i] = i + 1
  }


  if (isNaN(prem[0])) {
    for (let i = 0; i < prem.length; i++) {
      prem[i] = 31 - prem.length + i + 1
    }
  }


  this.monthDays = {
    preMonthDays: prem,  //上月的天
    thisMonthDays: im,   //本月的天
    nextMonthDays: nextm, //下月的天
    day: d,
    month: m,
    year: y
  }

  // 没有看明白此算法的作用，在日历中没有使用this.weekDays数据
  var arr = []
  for (var i = 0; i < 7; i++) {
    var weekDate = new Date()
    weekDate.setFullYear(y)
    weekDate.setMonth(m - 1)
    weekDate.setDate(d - 1)
    var weekday = weekDate.getDay() // 获取星期几0-6
    var newday = weekDate.getDate() + 1 - weekday + i  //
    weekDate.setDate(newday - 1)
    arr.push({
      year: weekDate.getFullYear(),
      month: weekDate.getMonth() + 1,
      day: weekDate.getDate() + 1
    })
  }
  this.weekDays = {
    data: arr,
    day: d,
    month: m,
    year: y
  }
  // var array = []
  // for (var i = 0; i < prem.length; i++) {
  //   array.push(`${y}-${m - 1}-${prem[i]}`)
  // }
  // for (var i = 0; i < im.length; i++) {
  //   array.push(`${y}-${m}-${im[i]}`)
  // }
  // for (var i = 0; i < nextm.length; i++) {
  //   array.push(`${y}-${m + 1}-${nextm[i]}`)
  // }
  // console.log(array)
  // var arrayIndex = 0;
  // for (var i = 0; i < array.length; i++) {
  //   if(m === Number(array[i].split('-')[1]) && d === Number(array[i].split('-')[2])) {
  //     arrayIndex = i
  //     break
  //   }
  // }
};

Dater.change = function (anchor, type, time) {
  var date = new Date()
  date.setFullYear(anchor.year, anchor.month - 1, anchor.day)
  switch (type) {
    case 'y': {
      date.setFullYear(date.getFullYear() + time)
      break
    }
    case 'm': {
      date.setMonth(date.getMonth() + time)
      break
    }
    case 'w': {
      date.setDate(date.getDate() + time * 7)
      break
    }
    case 'd': {
      date.setDate(date.getDate() + time)
      break
    }
  }
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate()
  }
}

Dater.getTodayAnchor = function () {
  var date = new Date()
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate()
  }
}
Dater.AnchorToDayString = function (anchor) {
  // return '' + anchor.year + (anchor.month < 10 ? '0' : '') + anchor.month + (anchor.day < 10 ? '0' : '') + anchor.day
  // console.log( `${anchor.year}/${anchor.month < 10 ? '0': ''}${anchor.month}/${anchor.day < 10 ? '0' : ''}${anchor.day}`)
  return `${anchor.year}/${anchor.month < 10 ? '0': ''}${anchor.month}/${anchor.day < 10 ? '0' : ''}${anchor.day}`
}

Calendar.wx

<script>
import props from './props.js'
import Dater from '../../libs/date.js'
import OTS from '../../libs/objectToStyle.js'
var moment = require('moment')

export default {
  config: {
    usingComponents: { }
  },
  behaviors: [props],
  data: {
    selectItem: {},
    dayMap: {},
    monthsArray: [],
    oldItem: undefined,
    scrollTop: 0,
    oldRangeLeftItem: undefined,
    oldRangeRightItem: undefined,
    heightCount: 50,
    monthSwiperIndex: 0,
    myItem: undefined
  },
  attached () {
    console.log('attached')


  },
  ready () {
    this.reAttached ()

    console.log(this.data.dayMap)

  },
  methods: {
    reAttached () {

    // 获取开始月到结束月之前所有的月信息
    this.data.monthsArray.splice(0, this.data.monthsArray.length)
    let startMonthAnchor
    let endMonthAnchor
    if (isNaN(  Number(this.data.dateRange[0]))) { // 字符串
      startMonthAnchor = this.data.dateRange[0] + '/01'
      endMonthAnchor = this.data.dateRange[1] + '/01'
    } else {
      startMonthAnchor = moment().subtract(this.data.dateRange[0], 'months').format('YYYY/MM') + '/01'
      endMonthAnchor = moment().add(this.data.dateRange[1], 'months').format('YYYY/MM') + '/01'
    }

    console.log(startMonthAnchor, endMonthAnchor)

    for (let i = 0;; i++) {
      let year = moment(startMonthAnchor).year()  //年
      let month = moment(startMonthAnchor).month() + 1  //月，月在date中用0-11表示十二个月
      let day = moment(startMonthAnchor).date() //天

      let startMonthDater = new Dater(year, month, day).monthDays // Dater使用的是正常月份
      let monthArray = this.getMonthArray(startMonthDater, i)
      monthArray.monthIndex = i
      this.data.monthsArray.push(monthArray)
      if (moment(startMonthAnchor).isSame(endMonthAnchor, 'month')) { 
        break
      }
      startMonthAnchor = moment(startMonthAnchor).add(1, 'month')
    }

    if (this.data.value) {
      if (typeof this.data.value === 'string') {  
        let dIndex = this.momentTransToItem(moment(this.data.value)).dayIndex
        let mIndex = this.momentTransToItem(moment(this.data.value)).monthIndex
        this.selectSingle(mIndex, dIndex)
      } else {
        let dIndex = this.momentTransToItem(moment(this.data.value[0])).dayIndex
        let mIndex = this.momentTransToItem(moment(this.data.value[0])).monthIndex
        this.selectRange(mIndex, dIndex, true)
        mIndex = this.momentTransToItem(moment(this.data.value[1])).monthIndex
        dIndex = this.momentTransToItem(moment(this.data.value[1])).dayIndex
        this.selectRange(mIndex, dIndex)
      }
    }
    this.setData({
      monthsArray: this.data.monthsArray,
      monthTitleStyle: OTS(this.data.monthTitleStyle),
      calendarWrapStyle: OTS(this.calendarWrapStyleObj())
    })
    // }, 3000);

    },
    changeHandler (e) {
      let index = e.detail.current
      // console.log()
      this.triggerEvent('monthchange', 
      `${this.data.monthsArray[index].year}/${this.data.monthsArray[index].month >= 10 ? '' :'0'}${this.data.monthsArray[index].month}`)
    },
    calendarWrapStyleObj () {
      let style = {}
      style.height = this.data.height + 'px'
      return style
    },
    itemTransToMoment (item) {
      if (item.day) {
        return moment(`${item.year}/${item.month}/${item.day}`)
      } else {
        return moment(`${item.year}/${item.month}`)
      }
    },
    momentTransToItem (moment) {
      for (let i = 0; i < this.data.monthsArray.length; i++) {
        for (let j = 0; j < this.data.monthsArray[i].data.length; j++) {
          if (
            this.data.monthsArray[i].data[j].isThisMonth &&
            moment.isSame(this.itemTransToMoment(this.data.monthsArray[i].data[j]))) {
            return this.data.monthsArray[i].data[j]
          }
        }
      }
    },
    inRangeSelect (rightItem, startI, endI, select) {
      for (let i = startI; i <= endI ; i++) {
        for (let j = 0; j < this.data.monthsArray[startI].data.length; j++) {          
          if (this.data.monthsArray[i].data[j].isThisMonth &&
          this.itemTransToMoment(this.data.monthsArray[i].data[j]).isAfter(this.itemTransToMoment(this.data.oldRangeLeftItem), 'day') && 
          this.itemTransToMoment(this.data.monthsArray[i].data[j]).isBefore(this.itemTransToMoment(rightItem), 'day')) {
            if (select) {
              this.data.monthsArray[i].data[j].isInRange = true
            } else {
              this.data.monthsArray[i].data[j].isInRange = false
            }
          }
          if (this.itemTransToMoment(this.data.monthsArray[i].data[j]).isSame(this.itemTransToMoment(rightItem), 'day')) {
            break
          }
        }
      }
    },
    selectRange (mIndex, dIndex, trans) {
      let selectItem = this.data.monthsArray[mIndex].data[dIndex]
      let selectMoment = this.itemTransToMoment(selectItem)
      if (selectItem.isPastDay && this.data.disablePastDays) {
        this.triggerEvent('failed')
        return
      }
      if (selectItem.isForeDay && this.data.disableForeDays) {
        this.triggerEvent('failed')
        return
      }
      if (selectItem.isToday && !this.data.canSelectToday) {
        this.triggerEvent('failed')
        return
      }
      if (!this.data.oldRangeLeftItem && !this.data.oldRangeRightItem) { // 两边都没有
        selectItem.isRangeLeft = true // 变颜色
        this.data.oldRangeLeftItem = selectItem // 老东西
        this.triggerEvent('selectedstart', selectItem.value)
      } else if (this.data.oldRangeLeftItem, !this.data.oldRangeRightItem) { //左有右没有
        // maxRange选取
        if (this.data.maxRange) {
          if (this.itemTransToMoment(this.data.oldRangeLeftItem).add(this.data.maxRange, 'day').isBefore(selectMoment,'day')) {
            this.triggerEvent('failed')
            return
          }
        }
        if (this.itemTransToMoment(this.data.oldRangeLeftItem).isAfter(selectMoment, 'day')) { // 如果选择在之前
        // this.data.oldRangeLeftItem = this.
        this.data.oldRangeLeftItem.isRangeLeft = false
        selectItem.isRangeLeft = true // 变颜色
        this.data.oldRangeLeftItem = selectItem
        this.triggerEvent('selectedstart', selectItem.value)
        } else if (this.itemTransToMoment(this.data.oldRangeLeftItem).isBefore(selectMoment, 'day')) { // 如果选择在之后

          selectItem.isRangeRight = true // 变颜色
          this.data.oldRangeRightItem = selectItem // 老东西
          let startI = this.data.oldRangeLeftItem.monthIndex
          let endI = selectItem.monthIndex
          this.inRangeSelect(selectItem, startI, endI, true)
          this.triggerEvent('selectedend', selectItem.value)
        } else {
          selectItem.isRangeLeft = false // 变颜色
          this.data.oldRangeLeftItem = undefined
        }
      } else { //如果都有
        let startI = this.data.oldRangeLeftItem.monthIndex
        let endI = this.data.oldRangeRightItem.monthIndex
        this.inRangeSelect(this.data.oldRangeRightItem, startI, endI, false)
        this.data.oldRangeLeftItem.isRangeLeft = false
        this.data.oldRangeRightItem.isRangeRight = false
        this.data.oldRangeRightItem = undefined
        selectItem.isRangeLeft = true // 变颜色
        this.data.oldRangeLeftItem = selectItem // 老东西
        this.triggerEvent('selectedstart', selectItem.value)
      } 
      if (trans) {
        this.setData({
          monthSwiperIndex:mIndex
        })
      }
    },
    selectSingle (mIndex, dIndex) {
      let selectItem = this.data.monthsArray[mIndex].data[dIndex]

      if (selectItem.isPastDay && this.data.disablePastDays) {
        this.triggerEvent('failed')
        return
      }
      if (selectItem.isForeDay && this.data.disableForeDays) {
        this.triggerEvent('failed')
        return
      }
      if (selectItem.isToday && !this.data.canSelectToday) {
        this.triggerEvent('failed')
        return
      }
      
      if (this.data.oldItem) {
        this.data.oldItem.isClicked = false
      }
      this.data.monthsArray[mIndex].data[dIndex].isClicked = true
      
      
      this.data.oldItem = this.data.monthsArray[mIndex].data[dIndex]

      
      this.data.selectItem = this.data.oldItem
      this.setData({
        monthSwiperIndex:mIndex,
        myItem: this.data.selectItem,
        oldItem: this.data.oldItem
      })
      this.triggerEvent('change', selectItem.value)
    },
    touchStartHandler (e) {

      console.time('a')
      let mIndex = e.currentTarget.dataset.monthIndex
      let dIndex = e.currentTarget.dataset.dayIndex
      let selectItem = this.data.monthsArray[mIndex].data[dIndex]
      if (selectItem.isThisMonth === false) {
        return
      }
      if (this.data.selectRangeMode) {
        this.selectRange(mIndex, dIndex)
      } else {
        this.selectSingle(mIndex, dIndex)
      }
      // this.setData({
      //   monthsArray: this.data.monthsArray
      // })
      console.timeEnd('a')
    },
    getMonthArray (date, monthIndex) {
      let monthArray = {}
      let lineCount = 0
      var count = 0
      monthArray.data = []
      monthArray.year = date.year
      monthArray.month = date.month
      for (let i = 0; i < date.preMonthDays.length; i++) {
        let obj = {}
        obj.day = date.preMonthDays[i]
        if (date.month === 1) {
          obj.month = 12
          obj.year = date.year - 1
        } else {
          obj.month = date.month - 1
          obj.year = date.year
        }
        obj.value = `${obj.year}/${obj.month < 10 ? '0' : ''}${obj.month}/${obj.day < 10 ? '0' : ''}${obj.day}`


        obj.isThisMonth = false    
        obj.isClicked = false
        obj.isRangeLeft = false
        obj.isRangeRight = false
        obj.isInRange = false
        obj.monthIndex = monthIndex
        obj.dayIndex = count
        this.data.dayMap[obj.value] = obj
        if ([0, 6].indexOf((moment(obj.value).weekday())) !== -1) {
          obj.isHoliday = true
        }
        monthArray.data.push(obj)
        count++
      }
      for (let i = 0; i < date.thisMonthDays.length; i++) {
        let obj = {}
        obj.day = date.thisMonthDays[i]
        obj.month = date.month
        obj.year = date.year
        obj.isThisMonth = true
        obj.isClicked = false
        obj.isRangeLeft = false
        obj.isRangeRight = false
        obj.isInRange = false
        obj.monthIndex = monthIndex
        obj.dayIndex = count
        obj.value = `${obj.year}/${obj.month < 10 ? '0' : ''}${obj.month}/${obj.day < 10 ? '0' : ''}${obj.day}`
        if ([0, 6].indexOf((moment(obj.value).weekday())) !== -1) {
          obj.isHoliday = true
        }
        if (moment(`${obj.year}/${obj.month}/${obj.day}`).isBefore(moment(), 'day')) {
          obj.isPastDay = true
          obj.isForeDay = true
          obj.isToday = false
        } else if (moment(`${obj.year}/${obj.month}/${obj.day}`).isAfter(moment(), 'day')) {
          obj.isPastDay = false
          obj.isForeDay = true
          obj.isToday = false
        } else {
          obj.isPastDay = false
          obj.isForeDay = false
          obj.isToday = true
        }
        monthArray.data.push(obj)
        count++
        this.data.dayMap[obj.value] = obj
      }
      // if (date.nextMonthDays.length >= 7) {
      //   date.nextMonthDays.splice(date.nextMonthDays.length - 7, 7)
      //   lineCount++
      // }

      for (let i = 0; i < date.nextMonthDays.length; i++) {
        let obj = {}
        obj.day = date.nextMonthDays[i]

        if (date.month === 12) {
          obj.month = 1
          obj.year = date.year + 1
        } else {
          obj.month = date.month + 1
          obj.year = date.year
        }
        obj.isThisMonth = false
        obj.isClicked = false
        obj.isRangeLeft = false
        obj.isRangeRight = false
        obj.isInRange = false
        obj.monthIndex = monthIndex
        obj.dayIndex = count
        obj.value = `${obj.year}/${obj.month < 10 ? '0' : ''}${obj.month}/${obj.day < 10 ? '0' : ''}${obj.day}`
        if ([0, 6].indexOf((moment(obj.value).weekday())) !== -1) {
          obj.isHoliday = true
        }
        monthArray.data.push(obj)
        count++
        this.data.dayMap[obj.value] = obj

      }
      monthArray.positionY = this.data.heightCount


      monthArray.value = `${date.year}/${date.month > 10 ? '' : '0'}${date.month}`



      if (lineCount === 0) {
        monthArray.monthHeight = 350
      } else if (lineCount === 1) {
        monthArray.monthHeight = 300
      } else {
        monthArray.monthHeight = 250
      }
      this.data.heightCount += monthArray.monthHeight
      return monthArray
    },
  }
}

</script>