微信小程序自定义组件--时间组件（前一天后一天切换）

要实现的效果图如下

看一下页面结构，首先是组件的

下面是页面

直接上代码

// components/daychoose/daychoose.js
var util = require('../../utils/util.js');
Component({
  attached() {
    const date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day=date.getDate();

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

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

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

  /**
   * 组件的方法列表
   */
  methods: {
    bindPreDay:function(){
      let { year, month,day} = this.data;
      let curday = year + '-' + month + '-' + day;
      //前一天的日期
      let dateText = util.getNextPreDate(curday, -1).split('-');
      year = dateText[0];
      month = dateText[1];
      day = dateText[2];

      const date = new Date();
      let minYear = date.getFullYear();
      let minMonth = date.getMonth() + 1;
      let minDay=date.getDate();
      let isPre = (year > minYear) || (year == minYear && month > minMonth) || (year == minYear && month == minMonth&&day>minDay);
      this.setData({
        year: year,
        month: month,
        day:day,
        nextActive: true,
        preActive: isPre
      });
      this.triggerEvent("bindpreDay", { year, month,day});
    },
    bindNextDay:function(){
      let { year, month,day, maxYear, maxMonth,maxDay}=this.data;
      let curday=year+'-'+month+'-'+day;
      //后一天的日期
      let dateText=util.getNextPreDate(curday,1).split('-');
      year = dateText[0];
      month=dateText[1];
      day=dateText[2];
      let isNext = (maxYear > year) || (maxYear == year && maxMonth > month) || (maxYear == year && maxMonth == month && maxDay > day);
      this.setData({
        year: year,
        month: month,
        day:day,
        nextActive: isNext,
        preActive:true
      });
      this.triggerEvent("bindnextDay", { year, month,day })
    }
  }
})

<!--components/daychoose/daychoose.wxml-->
<view class='month-view'>
<view class='{{preActive ? "active" : "disable"}}' bindtap="bindPreDay">前一天</view>
<view>{{year}}年{{month}}月{{day}}日</view>
<view class='{{nextActive ? "active" : "disable"}}' bindtap="bindNextDay">后一天</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-->
 

    <daychoose id='dayC' name="dayC"  
  endDate='{{endtime}}'
  bind:bindpreDay="_bindpreDay"
  bind:bindnextDay="_bindnextDay">
  </daychoose>

// pages/schedule/schedule.wxss
page{
  font-size: 32rpx;
}
.view-schItem{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100rpx;
  align-items: center;
  border-bottom:1px solid #e4e4e4;
}

.view-sch{
  padding: 0 30rpx;
  margin-top:30rpx;
}
.inner-vie{
  width:20%;
}
.btn-item {
width:100%;
height:60rpx;
font-size:28rpx;
line-height:60rpx;
justify-self: flex-end;
color:#682E09;
background-color:#ffffff;
border:1px solid #682E09;
}

.txt-nm {
width:40%;
  font-size:28rpx;
text-align:left;
}

.txt-del{
  width: 20%;
   display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size:28rpx;
line-height:46rpx;

}

// pages/schedule/schedule.js

Page({

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

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

  }
  _bindpreDay(e) {
    let { year, month,day } = e.detail;
    this.getDoctorList(year, month);
  },
  _bindnextDay(e) {
    let { year, month,day } = e.detail;
    this.getDoctorList(year, month);
  },
})

不要忘了引用组件

{
  "usingComponents": {
    "daychoose": "/components/daychoose/daychoose"
  }
}

上面代码中用到了util.js中的方法，需要加进去

  /*
  *获取指定日期的前一天，后一天
  *date 代表指定的日期，格式：2018-09-27
  *day 传-1表始前一天，传1表始后一天
  */
const getNextPreDate = function getNextPreDate(date, day) {
  var dd = new Date(date);
  dd.setDate(dd.getDate() + day);
  var y = dd.getFullYear();
  var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
  var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
  return y + "-" + m + "-" + d;
};

module.exports = {
  formatTime: formatTime,
  changeDateFormat: changeDateFormat,
  numberFormat: numberFormat,
  getNextPreDate: getNextPreDate
}

好了，搞定（这是在上一篇博文-- 微信小程序自定义组件--时间组件（上月下月切换）的基础上改的，可以参考哦）