专栏首页web秀小程序日历控件js日历数据组装

小程序日历控件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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS实用技巧第一讲:文字处理

    作为程序猿的我们,书写代码也需要大量的技巧。一份良好的代码能让人耳目一新,让人容易理解,同时也让自己成就感满满。因此,在这里简单的整理一些CSS开发技巧,希望能...

    Javanx
  • 8个问题看你是否真的懂 JS

    JavaScript 是一种有趣的语言,我们都喜欢它,因为它的性质。浏览器是JavaScript的主要运行的地方,两者在我们的服务中协同工作。JS有一些概念,人...

    Javanx
  • VUE开发一个组件——日历选择控件

    Javanx
  • 5.2.4 二维无内热源稳态导热程序

    算例如下图矩形,左侧和下侧边界上温度分别是某一函数分布;右侧和上侧温度为0.

    周星星9527
  • openlayers4中闪烁点的实现

    lzugis
  • JavaScript组件设计思想

    上个周,并肩作战的田老师离职了,尽管在一起愉快玩耍的时间不到一年,自己仍然还是从其身上学到、体会到了好多关于知识、理想的东西。对于大多数年轻人关于“晚上想想千条...

    奋飛
  • Canvas基础-粒子动画Part4

    在之前的文章 Canvas基础-粒子动画Part2 和 Canvas基础-粒子动画Part3 中分别讲了用图片和文字做粒子动画,今天我们来把代码简单整理一下,...

    Bob.Chen
  • “秒杀”心得

        本文记录对某网站A的秒杀活动编写秒杀器的经历和技术重点。 故事回顾     某日早上,朋友给我说最近A网站在开展秒杀活动,有IPad、IPhone,让大...

    用户1172223
  • js设计模式补白之 this/call和apply

    这里call(this)显然是把当前的作用域(window)绑定给了getName方法。

    一粒小麦
  • qrCode生成二维码图片

    QRCode.js 是一个用于生成二维码图片的插件。 1.文件脚本 var QRCode;!function(){function a(a){this.mode...

    用户1055830

扫码关注云+社区

领取腾讯云代金券