在移动端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代码：