微信小程序自定义组件--时间组件（上月下月切换）

需求基本上如下图：点击上月下月可以设置切换 

页面目录结构

 在这个页面中使用该组件

好了，开始上代码

// components/monthchoose/monthchoose.js
Component({
  attached() {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;

    const maxDate = new Date(this.properties.endDate);
    console.log("maxDate", maxDate);
    let maxYear=maxDate.getFullYear();
    let maxMonth=maxDate.getMonth()+1;
    let isNext = (maxYear > year) || (maxYear == year && maxMonth > month);

    this.setData({
      year: year,
      month: month,
      maxYear: maxYear,
      maxMonth: maxMonth,
      nextActive: isNext
    });
  },
  /**
   * 组件的属性列表
   */
  properties: {
    endDate:{
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: null, 
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    year: 1900,
    month: 1,
    maxYear: 1900,
    maxMonth: 1,
    preActive:false,
    nextActive:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    bindPreMonth:function(){
      let { year, month} = this.data;
      if(month==1){
        month = 12;
        year = year - 1;
      }
      else{
        month = month -1;
      }
      const date = new Date();
      let minYear = date.getFullYear();
      let minMonth = date.getMonth() + 1;
      let isPre = (year > minYear) || (year == minYear && month > minMonth);
      this.setData({
        year: year,
        month: month,
        nextActive: true,
        preActive: isPre
      });
      this.triggerEvent("bindpreMonth", { year, month});
    },
    bindNexMonth:function(){
      let { year, month, maxYear, maxMonth}=this.data;
      if (month==12){
        month=1;
        year=year+1;
      }
      else{
        month = month +1;
      }
      let isNext = (maxYear > year) || (maxYear == year && maxMonth > month);
      this.setData({
        year: year,
        month: month,
        nextActive: isNext,
        preActive:true
      });
      this.triggerEvent("bindnextMonth", { year, month })
    }
  }
})

<!--components/monthchoose/monthchoose.wxml-->
<view class='month-view'>
<view class='{{preActive ? "active" : "disable"}}' bindtap="bindPreMonth">上月</view>
<view>{{year}}年{{month}}月</view>
<view class='{{nextActive ? "active" : "disable"}}' bindtap="bindNexMonth">下月</view>
</view>

.month-view{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  font-size: 32rpx;
  border-bottom: 1px solid #682E09;
}

.active{
  color: #682E09;
}

.disable{
  color: #e4e4e4;
}

<!--pages/schedule/schedule.wxml-->
  <monthchoose id='monthC' name="monthC"  
  endDate='{{endtime}}'
  bind:bindpreMonth="_bindpreMonth"
  bind:bindnextMonth="_bindnextMonth">
  </monthchoose>

// pages/schedule/schedule.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    endtime:'2019-07-20',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
   
  },

  _bindpreMonth(e) {
    let {year,month}=e.detail;
  
  },
  _bindnextMonth(e) {
    let { year, month } = e.detail;
   
  },
})

当然不要忘了在schedul.json文件中加上引用组件的代码

{
  "usingComponents": {
    "monthchoose": "/components/monthchoose/monthchoose"
  }
}

好了，搞定。不过写完我发现我需要一个前一天后一天这样的组件，再加工一下吧，先记录一下