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

前言

在h5开发中，很多地方都要用到日历控件，比如生日、出发到达日期等等，今天就来讲讲日历控件数据初始化。
用到了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的，下方的页面看看大家能不能用上

<view id="calerdar">
    <div>
      <div id="calendar-date" v-bind:class="{single: labels.length === 1}">
        <div class="date fl">
          <span class="year">{{startDateMomentYear}}</span>
          <span class="month-date">{{startDateMomentMonth}}</span>
          <span class="label">{{labels[0]}}</span>
        </div>
        <div class="date fr" v-if="endDateMoment">
          <span class="year">{{endDateMomentYear}}</span>
          <span class="month-date">{{endDateMomentMonth}}</span>
          <span class="label">{{labels[1]}}</span>
        </div>
        <div class="date placeholder fr" v-else=""></div>
        <div class="spliter"></div>
      </div>
      <ul id="week-label">
        <li class="item" v-for="(week, windex) in weeks" :key="windex">{{week}}</li>
      </ul>
    </div>
    <div>
      <div id="month-list" v-bind:state="waiting ? 'waiting' : 'complete' " v-on:scroll="loadRepeat">
        <section class="month-item" v-for="(month, mindex) in monthList" :key="mindex">
          <p class="month-info">{{month.numStr}}月</p>
          <ul class="month-main">
            <li class="item null" v-for="(pmitem, pmindex) in month.prefix" :key="pmindex"></li>
            <li class="item date" @click="checkDate(date)" v-for="(date, dindex) in month.dateList" :key="dindex" :class="{'disable': date.isDisable,'today': date.isToday,'start-date': date.isStartDate, 'end-date': date.isEndDate, 'progress': date.isProgress}">
              <span class="num">{{date.dateData ? date.dateData.date : ''}}</span>
            </li>
            <li class="item null" v-for="(smitem, smindex) in month.surfix" :key="smindex"></li>
          </ul>
        </section>
      </div>
    </div>
  </view>

公告

以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新