mpvue实现周日历插件

代码语言：javascript复制

<template>
  <view class="page">
    <view class="page_bd" v-for="(item,index) in data ">
      <view class="weui-loadmore ">
        <view class="weui-loadmore__tips ">{{item.month}}月</view>
      </view>
      <view class="weui-flex" style="padding:0 60rpx;">
        <view class="weui-flex__item" v-for="(week,inx) in item.week" :class="[week.time[2] ? 'gray': '']">
          <view class="placeholder">第{{week.time[1]}}周</view>
          <view class="placeholder">{{week.time[0]}}</view>
        </view>
      </view>

    </view>
  </view>

</template>

<script scoped>
  import format from '@/utils/date.format.js'

  export default {
    data() {
      return {
        data: ''
      }
    },
    onLoad: function() {
      let date = new Date() //当前日期
      let year = date.getFullYear() //当前年

      var days = []
      var counts = []
      for (var i = 1; i <= 12; i  ) {
        days.push({
          month: i,
          week: this.get_week_list(year, i)
        })
      }
      this.data = days
      console.log('days', days)
    },
    methods: {
      //获取每月的周数&&起始日期
      get_week_list(year, month) {
        var week_count = ''
        var day_count = []
        week_count = this.getWeeks(year, month)
        for (var j = 1; j <= week_count; j  ) {
          day_count.push({
            month: month,
            time: this.getWeekTime(year, month, j)
          })
        }
        return day_count
      },
      //获取每月有几周
      getWeeks(year, month) {
        var d = new Date()
        // 该月第一天
        d.setFullYear(year, month - 1, 1)
        var w1 = d.getDay()
        if (w1 == 0) w1 = 7
        // 该月天数
        d.setFullYear(year, month, 0)
        var dd = d.getDate()
        // 第一个周一
        let d1
        if (w1 != 1) d1 = 7 - w1   2
        else d1 = 1
        let week_count = Math.ceil((dd - d1   1) / 7)
        return week_count
      },
      //根据年月周获取该周从周一到周日的日期
      getWeekTime(year, month, weekday) {
        var d = new Date()
        // 该月第一天
        d.setFullYear(year, month - 1, 1)
        var w1 = d.getDay()
        if (w1 == 0) w1 = 7
        // 该月天数
        d.setFullYear(year, month, 0)
        var dd = d.getDate()
        // 第一个周一
        let d1
        if (w1 != 1) d1 = 7 - w1   2
        else d1 = 1
        var monday = d1   (weekday - 1) * 7
        var sunday = monday   6
        var from = year   '-'   month   '-'   monday
        var to
        if (sunday <= dd) {
          to = year   '-'   month   '-'   sunday
        } else {
          d.setFullYear(year, month - 1, sunday)
          let days = d.getDate()
          to = d.getFullYear()   '-'   (d.getMonth()   1)   '-'   days
        }

        //拼接每周的起始时间
        var a =
          from.split('-')[1]  
          '.'  
          from.split('-')[2]  
          '-'  
          to.split('-')[1]  
          '.'  
          to.split('-')[2]  
          ''

        //判断当前标志是否该灰掉
        let date = new Date() //当前日期
        let years = date.getFullYear() //当前年
        let months = date.getMonth()   1 //当前月份
        let days = date.getDate() //当天
        var flag = 0 //灰色背景标记，1代表灰度，0代表正常
        if (
          years < year ||
          (years == year && months < month) ||
          (years == year &&
            months == month &&
            (from.split('-')[2] <= days && days <= to.split('-')[2]))
        ) {
          flag = 1
        } else {
          flag = 0
        }
        return [a, weekday, flag]
      }
    },
    mounted: function() {
      wx.setNavigationBarTitle({
        title: '选择时间'
      })
    }
  }
</script>
<style scoped>
  .page,
  .page_bd,
  .weui-loadmore {
    background-color: #fff;
  }
  .weui-flex {
    display: flex;
    flex-flow: row wrap; /* 换行 */
    align-items: center;
    background-color: #fff;
  }
  .weui-flex__item {
    flex: 0 1 25%; /* 宽度 */
    padding: 15px 0;
    text-align: center; /*  或者 display: flex; */
    box-sizing: border-box;
    float: left;
  }
  .weui-flex__item:nth-of-type(4n   4) {
    border-right: none;
  }
  .placeholder {
    font-size: 24rpx;
  }
  .gray {
    color: #808080;
  }
</style>

mpvue 插件

0 人点赞