使用APICloud AVM框架封装app日历组件

<template>
    <view class="page">
    <safe-area></safe-area>
    <view class="calendar-wrapper">
      <view class="calendar-toolbar">
        <text class="prev" onclick="prevMonth">〈</text>
        <text class="current">{{ currentDateStr }}</text>
        <text class="next" onclick="nextMonth">〉</text>
      </view>
      <view class="calendar-week">
        <text class="week-item" v-for="item of weekList" :key="item">{{ item }}</text>
      </view>
      <view class="calendar-inner">
        <text class="calendar-item" v-for="(item, index) of calendarList" :key="index" :class="this.changestyle(item.disable,item.value)"
        onclick="selDate" :data-val="item.value" :data-status="item.disable" :data-num="item.date">{{ item.date }}</text>
      </view>
    </view>
    </view>
</template>
<script>
  export default {
    name: 'calendar',
    installed(){
      this.setCurrent();
      this.calendarCreator();
    },
    data() {
      return{
        current:{}, 
        weekList:['周日','周一','周二','周三','周四','周五','周六'],
        shareDate: new Date(),
        calendarList: [],
        seldate:'点击选择日期',
        selweek:'待定',
      }
    },
    computed: {
      // 显示当前时间
      currentDateStr() {
        let { year, month } = this.current;
        return `${year}年${this.pad(month + 1)}月`;
      }
    },
    methods: {
      selDate (e){
        // console.log(JSON.stringify(e.currentTarget.dataset.val));
        let status = e.currentTarget.dataset.status;
        let num = e.currentTarget.dataset.num;
        if(status){
          this.data.seldate = e.currentTarget.dataset.val;
          this.getWeek();
          if(num>7){
            this.prevMonth();
          }
          else{
            this.nextMonth();
          }
        }
        else{
          this.data.seldate = e.currentTarget.dataset.val;
          this.getWeek();
          //重新加载一次日历 改变样式
          this.calendarCreator();
        }
        this.fire('clickDate', this.data.seldate);
      },
      changestyle(status,date){
        if(status){
          return 'calendar-item-disabled';
        }
        else{
          if(date == this.data.seldate){
            return 'calendar-item-checked';
          }
          else{
            return 'calendar-item';
          }
        }
      },
      // 判断当前月有多少天
      getDaysByMonth(year, month) {
        // console.log("本月多少天："+new Date(year, month + 1, 0).getDate());
        return new Date(year, month + 1, 0).getDate();
      },
      getFirstDayByMonths(year, month) {
        // console.log("本月第一天周几："+new Date(year, month, 1).getDay());
        return new Date(year, month, 1).getDay();
      },
      getLastDayByMonth(year, month) {
        // console.log("本月最后一天周几："+new Date(year, month + 1, 0).getDay());
        return new Date(year, month + 1, 0).getDay();
      },
      // 对小于 10 的数字，前面补 0
      pad(str) {
        return str < 10 ? `0${str}` : str;
      },
      // 点击上一月
      prevMonth() {
        this.current.month--;
        // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
        this.correctCurrent();
        // 生成新日期
        this.calendarCreator();
      },
      // 点击下一月
      nextMonth() {
        this.current.month++;
        // 因为 month的变化 会超出 0-11 的范围， 所以需要重新计算
        this.correctCurrent();
        // 生成新日期
        this.calendarCreator();
      },
      // 格式化时间，与主逻辑无关
      stringify(year, month, date) {
        let str = [year, this.pad(month + 1), this.pad(date)].join('-');
        return str;
      },
      // 设置或初始化 current
      setCurrent(d = new Date()) {
        let year = d.getFullYear();
        let month = d.getMonth();
        let date = d.getDate();
        this.current = {
            year,
            month,
            date
        }
      },
      // 修正 current
      correctCurrent() {
        let { year, month, date } = this.data.current;
        let maxDate = this.getDaysByMonth(year, month);
        // 预防其他月跳转到2月，2月最多只有29天，没有30-31
        date = Math.min(maxDate, date);
        let instance = new Date(year, month, date);
        this.setCurrent(instance);
      },
      // 生成日期
      calendarCreator() {
        // 一天有多少毫秒
        const oneDayMS = 24 * 60 * 60 * 1000;
        let list = [];
        let { year, month } = this.data.current;
        // 当前月份第一天是星期几, 0-6
        let firstDay = this.getFirstDayByMonths(year, month);
        // 填充多少天                         
        let prefixDaysLen = firstDay === 0 ? 7 : firstDay;
        // 毫秒数
        let begin = new Date(year, month, 1).getTime() - oneDayMS * prefixDaysLen;
        // 当前月份最后一天是星期几, 0-6
        let lastDay = this.getLastDayByMonth(year, month);
        // 填充多少天， 和星期的排放顺序有关
        let suffixDaysLen = lastDay === 0 ? 6 : 6 - lastDay;
        // 毫秒数
        let end = new Date(year, month + 1, 0).getTime() + oneDayMS * suffixDaysLen;
        while (begin <= end) {
            // 享元模式，避免重复 new Date
            this.data.shareDate.setTime(begin);
            let year = this.data.shareDate.getFullYear();
            let curMonth = this.data.shareDate.getMonth();
            let date = this.data.shareDate.getDate();
            list.push({
                year: year,
                month: curMonth,
                date: date,
                disable: curMonth !== month,
                value: this.stringify(year, curMonth, date)
            });
            begin += oneDayMS;
        }
        this.data.calendarList = list;      
        // console.log(JSON.stringify(this.data.calendarList));
      },
      //获取选中日期的周几
      getWeek(){
        let index =new Date(this.data.seldate).getDay();
        let weekArr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五','星期六'];
        let week = weekArr[index];
        this.data.selweek = week;
      },
    }
  }
</script>
<style>
    .page {
        height: 100%;
    }
  .calendar-wrapper {
    margin: 10px 10px 0 10px;
    background-color:#3c40c6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-height: 400px;
  }
  .calendar-toolbar {
    padding: 10px 10px;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;    
    border-bottom: 1px solid #fff;
  }
  .prev{
    flex: 1;
    text-align: center;
    color: #fff;
  }
  .current {
    flex: 1;
    text-align: center;
    color: #fff;
  }
  .next{
    flex: 1;
    text-align: center;
    color: #fff;
  }
  .calendar-week {
    padding: 5px 10px;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
  }
  .week-item { 
    padding: 5px;
    font-weight: bolder;
    font-size: 12px;
    color: #fff;
  }
  .calendar-inner{
    padding: 10px 10px;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
  }
  .calendar-item {
    width:14%;
    font-weight: bolder;
    text-align: center;
    font-size: 15px;
    color: #fff;
    padding: 5px;
    background-color: #3c40c6;
  }
  .calendar-item-disabled {
    width:14%;
    font-weight: bolder;
    text-align: center;
    font-size: 15px;
    color: #999;
  }
  .calendar-item-checked {
    width:14%;
    font-weight: bolder;
    text-align: center;
    font-size: 15px;
    color: #000000;
    background-color: #ffffff;
    border-radius: 5px;
  }
</style>

<template>
    <view class="page">
    <calendar onclickDate="getSelDate"></calendar>
    <view>
      <text>当前日期是</text>
      <text>{today}</text>
    </view>
    </view>
</template>
<script>
  import '../../components/calendar.stml'  
  export default {
    name: 'test',
    apiready(){
    },
    data() {
      return{
        today:''
      }
    },
    methods: {
      getSelDate(e){
        console.log(JSON.stringify(e));
        this.data.today = e.detail;
        api.toast({
          msg:'当前选中日期是：'+e.detail
        })
      }
    }
  }
</script>
<style>
    .page {
        height: 100%;
    }
</style>