在移动端vue项目中，使用原生js写一个日历模块

需求分析

考虑到vux中的日历不是很符合有些项目的需求，所以结合大佬之前写的代码，做出一定修改，使用原生js做出如下这样一个日历模块。

效果图

因为项目中没有对滑动做具体要求，所以这里并没实现日历滑动效果，需要的同学可以引入swiper去完成。目前，只实现了修改datetime时间，下方的的日期排版根据周一至周六进行变化，以及点击某一天，此天样式会出现变化。

主要思路

1 计算当前年月第一天是周几，以此得出这个月第一行中不显示日期的格子数量，以及要开始显示日期的位置。
2 计算在当前年月一共有多少天，并生成一个存储了2019-08-01到2019-08-31的数组，数组每一项都是一个对象，每一个对象其属性值都是一个日期。然后从第一行中开始显示日期的格子遍历上面的数组。每一个格子存储一个日期。
3 监听datetime日期的变化，一旦变化就调用第二步的方法，让日历随日期即时变化

源码

html代码：

<div class="my-calendar">
    <div class="head-date">
      <div class="sheet-date-time" @click="showDateTime()">
        <span class="date-time-text">{{changeFormat1(sendDate)}}</span>
        <span class="triangle-down"></span>
      </div>
    </div>
    <div class="calendar-content">
      <div class="calendar-wrap">
        <!--日历星期-->
        <section class="week">
          <span v-for="(week, index ) in weekList" :key="'weekList' + index">{{week}}</span>
        </section>
        <!--日历天数-->
        <section class="day">
          <!--空白格子-->
          <span class="blank"
                v-if="blankList!='7'"
                v-for="(blank, index ) in blankList" :key="'blankList' + index"
          >{{blank}}</span>

          <span
            class="dayBar"
            v-for="(day, index ) in dayCalender" :key="'dayCalender' + index"
            :class="{'chose-span':choseFlag===day}"
            @click="clickDayDetail(day)"
          >
                    <!--今天-->
                  <span
                    :class="{'show-today':new Date().toDateString()==new Date(day.date).toDateString()&&choseFlag!==day}"
                    v-if="new Date().toDateString()==new Date(day.date).toDateString()"
                  >今</span>
            <!--周六或周末-->
                    <span
                      :class="{'show-Weekend':(new Date(day.date).getDay()===6||new Date(day.date).getDay()===0)&&choseFlag!==day}"
                      v-else-if="new Date().toDateString()!==new Date(day.date).toDateString()"
                    >{{new Date(day.date).getDate()}}</span>
            <!--正常的每一天-->
                    <span class="show-formal" v-else>{{new Date(day.date).getDate()}}</span>
                  </span>
        </section>
      </div>
    </div>
  </div>

javascript代码：

data () {
    return {
      weekList: ['一', '二', '三', '四', '五', '六', '日'],
      blankList: '', // 空白的格子数
      choseFlag: '', // 用来调整今天选中的样式
      dayCalender: [], // 日历数据
      sendDate: '' // datetime日期
    }
  },
  created () {
    this.initialDateSet()
  },
  mounted () {
      
  },
  methods: {
    // 获取当前年份和月份
    initialDateSet () {
      let nowDate = new Date()
      let nowYear = nowDate.getFullYear()
      let nowMonth = nowDate.getMonth() + 1 // 月份0-11
      if (nowMonth < 10) {
        this.sendDate = nowYear + '-' + '0' + nowMonth
      } else {
        this.sendDate = nowYear + '-' + nowMonth
      }
    },

    // 传一个日期，获取这个月的所有日期   2019-07 获取-->  2019-07-01-----2019-07-31
    getTimeSheet (date) { // 2019-01
      console.log('我执行了: ', date)
      let nowMonth = date.slice(5, 7)
      let nowYear = date.slice(0, 4)
      this.blankList = this.getBlank(nowYear, nowMonth - 1) - 1
      this.dayCalender = []
      let year = +date.split('-')[0]
      let month = +date.split('-')[1]
      let d = new Date(year, month, 0)
      let dayLength = d.getDate() // 得到这一年这一月的天数
      let everyDate = '' // 定义每一天的日期  2019-01-01
      for (let k = 1; k <= dayLength; k++) {
        everyDate = year + '-' + month + '-' + k
        this.dayCalender.push({
          date: this.changeFormat2(everyDate),
          condition: ''
        })
      }
    },

    // 每月第一天周几
    getBlank (year, month) {
      let blankNum = new Date(year, month, '01') // 下一个月一号是周几
      if (blankNum.getDay() === 0) {
        return 7
      }
      return blankNum.getDay()
    },

    // 时间格式转化   2019-01  ---》  2019月1月
    changeFormat1(date) {
      let arr1 = date.split('-')
      let year = arr1[0]
      let month = +arr1[1]
      return year + '年' + month + '月'
    },
    // 时间格式转化   2019-1-1  ---》  2019-01-01
    changeFormat2 (date) {
      let arr1 = date.split('-')
      let year = arr1[0]
      let month = +arr1[1]
      let day = +arr1[2]
      month = month < 10 ? ('0' + month) : month // 判断日期是否大于10
      day = day < 10 ? ('0' + day) : day // 判断日期是否大于10
      return year + '-' + month + '-' + day
    },

    // 展示开始时间框
    showDateTime () {
      let _this = this
      this.$vux.datetime.show({
        cancelText: '取消',
        confirmText: '确定',
        format: 'YYYY-MM',
        value: _this.sendDate,
        onConfirm (v) {
          _this.sendDate = v
        }
      })
    },

    // 点击某天，显示样式
    clickDayDetail (val) {
      this.choseFlag = val // 获取当前日期
    }
  },
  computed: {

  },
  watch: {
    sendDate: {
      handler (newValue, oldValue) {
        this.getTimeSheet(newValue) // 监听sendDate变化，即时变化日历
      },
      immediate: true, // 页面一进入就开始监听
      deep: false
    }
  }

css代码：

<style lang="scss">
  .my-calendar{
    .head-date {
      background: #F5F5F5;
      height: 48px;
      padding: 10px;
      .sheet-date-time{
        width: 90px;
        height: 28px;
        position: relative;
        background-color: white;
        border-radius:16px;
        display: flex;
        align-items: center;
        justify-content: center;
        .date-time-text{
          color: #333333;
          font-size: 12px;
        }
        .triangle-down {//倒立三角形
          width: 0;
          height: 0;
          margin-left: 4px;
          border-left: 3.5px solid transparent;
          border-right: 3.5px solid transparent;
          border-top: 6px solid #CDCDCD;
        }
      }

    }
    .calendar-content{
      padding: 10px 0;
      background-color: white;
      .calendar-wrap {
        width: 100%;
        position: relative;
        left: 0;
        top: 0;
        font-size: 14px;
        .week {
          padding: 0 20px;
          display: flex;
          flex-wrap: nowrap;
          line-height: 35px;
          color: #333333;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          background: #fff;
          span {
            flex: 1;
            text-align: center;
          }
        }
        .day {
          padding: 0 20px;
          display: flex;
          flex-wrap: wrap;
          background: #fff;
          align-items: center;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          span {
            flex: 1;
            flex-basis: 13.65%;
            flex-grow: 0;
            line-height: 35px;
            text-align: center;
            margin: 1px;
          }

          .dayBar {
            position: relative;
            z-index: 100;
            i {
              position: absolute;
              bottom: 0;
              display: flex;
              width: 100%;
              .normal {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #2661ff;
                position: absolute;
                bottom: 0;
                right: 45%;
              }
              .abnormal {
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background: #f9400b;
                position: absolute;
                bottom: 0;
                right: 45%;
              }
            }
          }
          .chose-span {
            background: url("../../assets/images/circle.png") center
            center no-repeat;
            background-size: 35px 35px;
            color: #fff;
            /*pointer-events: none;//事件阻止*/
          }
          .show-formal {
            color: #333333;
          }
          .show-today {
            color: #2196f3;
          }
          .show-Weekend {
            color: #bebebe;
          }
          span.blank {
            color: transparent;
          }
        }
      }
    }
  }
</style>