小程序日历控件js日历数据组装

用到了moment插件，moment api地址请点击。

var TODAY = moment().startOf('date')
var SCROLL_LIMIT_PERCENT = 0.5
var MONTH_CH = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'] // 十二个月中文

var DateItem
var MonthItem
var makeDateList = function (data) {
  var firstDateInMonth = data.curMonth.clone()
  var lastDateInMonth = data.curMonth.clone().endOf('month')
  var prefixAmount = firstDateInMonth.day()
  var contentAmount = lastDateInMonth.date()
  var surfixAmount = (6 - lastDateInMonth.day()) % 6
  var result = []
  var i, l

  for (i = 0, l = prefixAmount + contentAmount + surfixAmount; i < l; i += 1) {
    if (i < prefixAmount || i >= prefixAmount + contentAmount) {
      result.push(new DateItem())
    } else {
      result.push(new DateItem(firstDateInMonth.clone(), data.disableBeforeMoment, data.disableAfterMoment))
      firstDateInMonth.add(1, 'd')
    }
  }
  return result
}
var formatDate = function (date, format) {
  return moment(date).format(format || 'YYYY-MM-DD')
}

DateItem = function (date, disableBeforeMoment, disableAfterMoment) {
  if (date !== undefined) {
    this.dateData = {
      year: date.year(),
      month: date.month(),
      date: date.date()
    }
    this.timeStamp = date.toDate().getTime()
    this.isToday = date.isSame(TODAY)
    this.isDisable = (disableBeforeMoment && date.isBefore(disableBeforeMoment)) || (disableAfterMoment && date.isAfter(disableAfterMoment))
  } else {
    this.isNull = true
  }
  this.isStartDate = false
  this.isEndDate = false
  this.isProgress = false
}
MonthItem = function (data) {
  var targetMonth = data.curMonth.clone().startOf('month')
  this.num = targetMonth.month()
  this.numStr = MONTH_CH[this.num]
  this.dateList = makeDateList(data)
}

 data () {
    var startMonth = moment(this.start).startOf('month')
    var singleMode = this.labels.length === 1
    return {
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      disableBeforeMoment: moment(this.disableBefore), // disableBefore组件参数（禁用什么日期之前的）
      disableAfterMoment: this.disableAfter && moment(this.disableAfter), // disableAfter组件参数（禁用什么日期之后的）
      firstMonth: startMonth, // 从什么月份开始
      curMonth: startMonth.clone(),
      curAmount: 0,
      monthList: [], // 最后的数据list
      startDateMoment: this.startDate && moment(this.startDate), // 开始日期
      singleMode: singleMode,
      endDateMoment: !singleMode && this.endDate && moment(this.endDate), // 结束日期
      loadFreeze: false,
      animateFreeze: false,
      waiting: false
    }
  }

调用上方方法，生成数据

methods: {
  loadRepeat () {
    var self = this
    if (!self.loadFreeze && self.showAmount > self.curAmount) {
      self.loadFreeze = true
      self.addMonth()
      setTimeout(() => {
 self.loadFreeze = false
 self.loadRepeat()
      }, 20)
    }
  },
  addMonth () {
    var monthItem = new MonthItem({
      curMonth: this.curMonth,
      disableBeforeMoment: this.disableBeforeMoment,
      disableAfterMoment: this.disableAfterMoment,
      startDateMoment: this.startDateMoment,
      endDateMoment: this.endDateMoment
    })
    this.monthList.push(monthItem)
    this.curAmount += 1
    this.curMonth.add(1, 'months')
  }
}

mounted () {
  Vue.nextTick(() => {
    this.loadRepeat()
  })
}

最后将monthList数据渲染到页面，由于小编用的框架是mpvue的，下方的页面看看大家能不能用上

    
      
 
   {{startDateMomentYear}}
   {{startDateMomentMonth}}
   {{labels[0]}}
 
 
   {{endDateMomentYear}}
   {{endDateMomentMonth}}
   {{labels[1]}}
 
 
 
      
      

 
{{week}}
      
    
    
      
 

   
{{month.numStr}}月
   

     

     

{{date.dateData ? date.dateData.date : ''}}