小程序日历 实现前端展示三个月 上下箭头切换效果

点击选中日期   开始时间和结束时间  类似于酒店入住

wxll

<view class='wraper'>
  <view class="list">
    <view class="close" catchtap="closetap">X</view>
    <view class="dateChoose">选择日期</view>
    <view class="clear" catchtap="cleartap">清除</view>
  </view>
  <view class="date-click">
    <view class="arrow-up" bindtap="lastMonth"></view>
    <view class="arrow-down" bindtap="nextMonth"></view>
  </view>
  <view class='header'>
    <view wx:for='{{date}}' wx:key="" class='{{item == "周六" || item == "周日" ? "weekMark" : ""}}'>{{item}}</view>
  </view>
  <view class='main'>
    <scroll-view class='main-scroll' scroll-y style="height: 100%" scroll-with-animation="true">
      <view class='main-list'>
        <view class='date-box' wx:for='{{calendar}}' wx:key="" wx:for-item='calendarItem' wx:for-index='idx'>
          <view class="title">{{idx}}</view>
          <view class="content">
            <view wx:for='{{calendarItem}}' wx:key="" class='days {{(item.isToday > inTime && item.isToday < outTime) || item.isToday == inTime || item.isToday == outTime ? "day-select" : ""}}' data-id='{{item.dateNum}}' data-day='{{item.isToday}}' bindtap="dayClick">
              <view class="content-day">
                <view wx:if="{{item.isToday == inTime}}" class='qiangXuan'>
                  <view style="color:#fff;">{{item.dateNum}}</view>
                  <view style="color:#fff;">起</view>
                </view>
                <view wx:if="{{item.isToday == outTime }}" class='houXuan'>
                  <text style="color:#fff;">{{item.dateNum}}</text>
                  <text style="color:#fff;" wx:if="{{item.isToday == inTime && item.isToday == outTime}}" class="day">起/止</text>
                  <text wx:else style="color:#fff;">止</text>
                </view>
                <text style='font-size:30rpx;'>{{item.dateNum}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
  <view class='footer'>
    <view>
      <view>开始时间：<text style="font-weight:900;">{{inTime}}</text></view>
      <view>结束时间：<text style="font-weight:900;">{{outTime}}</text></view>
    </view>
    <view class="sure" catchtap="suretap">确认</view>
  </view>
</view>

css

page {
  width: 100%;
  height: 100%;
}

.close {
  font-weight: 900;
  color: #e97328;
  font-size: 36rpx;
}

.dateChoose {
  font-size: 32rpx;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.clear {
  width: 90rpx;
  height: 48rpx;
  border-radius: 20rpx;
  line-height: 48rpx;
  text-align: center;
  background: #e97328;
  color: #fff;
}

.wraper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx 0 64rpx;
  box-sizing: border-box;
}

.header {
  color: #fff;
  line-height: 100rpx;
  flex: 0 0 100rpx; /* 不放大不缩小固定100rpx */
  display: flex;
  flex-direction: row;
  padding: 0 24rpx;
}

.header>view {
  padding: 0 36rpx;
}

.date-click {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 40rpx;
}

.arrow-up {
  display: inline-block;
  border-top: 2rpx solid;
  border-right: 2rpx solid;
  width: 36rpx;
  height: 36rpx;
  border-color: #666;
  transform: rotate(-45deg);
  margin: 10rpx auto auto 180rpx;
}

.arrow-down {
  display: inline-block;
  border-top: 2rpx solid;
  border-right: 2rpx solid;
  width: 36rpx;
  height: 36rpx;
  border-color: #666;
  transform: rotate(135deg);
  margin: -20rpx 180rpx auto 0;
}

.main {
  flex: 1;
  position: relative;
}

.main-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.title {
  line-height: 70rpx;
  padding: 0 24rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
}

.content {
  padding: 0 24rpx;
}

.days {
  width: 14.28%;
  text-align: center;
  display: inline-block;
  margin: 20rpx 0;
  padding: 20rpx 0;
  position: relative;
}

.day-select {
  position: relative;
  background: #f4b048;
  margin: 20rpx 0;
}
.content-day{
  /* position: relative; */
}
.day-select text {
  color: #fff;
}

.qiangXuan {
  background-color: #e97328;
  color: #fff;
  position: absolute;
  width: 100rpx;
  /* height: 75rpx; */
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: none;
  /* padding: 4rpx 0;
  box-sizing: border-box; */
}

.houXuan {
  background-color: #e97328;
  color: #fff;
  position: absolute;
  width: 100rpx;
  /* height:75rpx; */
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* border: 2rpx solid transparent; */
}

.not-select {
  color: #999;
}

.footer {
  background: #fff;
  color: #fff;
  line-height: 40rpx;
  height: 116rpx;
  flex: 0 0 100rpx; /* 不放大不缩小固定100rpx */
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.sure {
  width:334rpx;
  height: 68rpx;
  background: linear-gradient(141deg, rgba(245, 188, 78, 1) 0%, rgba(232, 111, 38, 1) 100%);
  border-radius: 34rpx;
  line-height: 68rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(232, 111, 38, 1); /*for Android*/
  -webkit-box-shadow: 0rpx 0rpx 8px 0px rgba(232, 111, 38, 1); /*for IOS*/
}

js

Page({
  data: {
    calendar: [],
    // 构建顶部日期时使用
    date: ['日', '一', '二', '三', '四', '五', '六'],
    inTime: '',
    outTime: '',
    year: 0,
    month: 0,
  },
  // 日历初始化
  dataInit(setYear, setMonth) {
    // 当前时间/传入的时间
    var now = setYear ? new Date(setYear, setMonth) : new Date();
    var year = setYear || now.getFullYear();
    // 传入的月份已经加1
    var month = setMonth || now.getMonth() + 1;
    // 构建某日数据时使用
    var obj = {};
    // 需要遍历的日历数组数据
    var dateArr = [];
    // 需要的格子数，为当前星期数+当月天数
    var arrLen = 0;
    // 该月加1的数值，如果大于11，则为下年，月份重置为1 
    // 目标月1号对应的星期
    var startWeek = new Date(year + '-' + (month < 10 ? '0' + month : month) + '-01').getDay();
    //获取目标月有多少天
    var dayNums = new Date(year, month < 10 ? '0' + month : month, 0).getDate();
    var num = 0;
    // 计算当月需要的格子数 = 当前星期数+当月天数
    arrLen = startWeek * 1 + dayNums * 1;
    for (var i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        obj = {
          /*
           * 返回值说明
           * isToday ： 2018-12-27
           * dateNum :  27
           */
          isToday: year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num),
          dateNum: num
        }
      } else {
        // 填补空缺
        // 例如2018-12月第一天是星期6，则需要补6个空格
        obj = {};
      }
      dateArr[i] = obj;
    };
    return dateArr;
  },
  // 点击了日期，选择开始时间或者结束时间
  dayClick(e) {
    var that = this;
    var eTime = e.currentTarget.dataset.day;
    var inTime = that.data.inTime;
    var outTime = that.data.outTime;
    var dayId = e.currentTarget.dataset.id;
    // if (inTime == '' || (new Date(eTime) == new Date(inTime)) || outTime != '') {
    if (inTime == '' || (new Date(eTime) < new Date(inTime)) || outTime != '') {
      // 如果开始时间为空或选择的时间小于等于开始时间，则选择的时间为开始时间
      inTime = eTime;
      outTime = '';
    } else {
      outTime = eTime;
    };

    that.setData({
      inTime,
      outTime
    })
  },
  /**
   * 上月切换
   */
  lastMonth: function() {
    let {
      year,
      month
    } = this.data;
    var time = [];
    var timeArray = {};
    // 上一个月的数据
    year = month - 1 <= 0 ? year - 1 : year;
    month = month - 1 <= 0 ? 12 : month - 1;
    time = this.dataInit(year, month);
    timeArray[year + '-' + (month < 10 ? '0' + month : month)] = time;
    for (let i = 1; i < 3; i++) {
      // 每个月的数据
      let y = month + i > 12 ? year + 1 : year
      let m = month + i > 12 ? i : month + i
      time = this.dataInit(y, m);
      // 接收数据
      timeArray[y + '-' + (m < 10 ? '0' + m : m) ] = time;
    };
    // 接收数据
    this.setData({
      calendar: timeArray,
      month,
      year
    });
  },
  /**
   * 下月切换
   */
  nextMonth: function() {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;
    this.setData({
      year: year,
      month: (month + 1)
    })
    var time = [];
    var timeArray = {};
    for (var i = 0; i < 3; i++) {
      year = month + 1 > 12 ? year + 1 : year;
      month = month + 1 > 12 ? 1 : month + 1;
      //   // 每个月的数据
      time = this.dataInit(year, month);
      //   // 接收数据
      timeArray[year + '-' + (month < 10 ? '0' + month : month) ] = time;
    };
    this.setData({
      calendar: timeArray
    });
  },
  // 返回上一页面
  closetap(e) {
    wx.navigateBack({
      delta: 1
    });
  },
  // 清除按钮
  cleartap(e) {
    var that = this;
    var inTime = that.data.inTime;
    var outTime = that.data.outTime;
    that.setData({
      inTime: '',
      outTime: ''
    })
  },
  suretap(e) {
    var that = this;
    var inTime = that.data.inTime;
    var outTime = that.data.outTime;
    if ((inTime == '' && outTime == '') || outTime == '') { 
      util.showErrorToast('请选择日期');
      return false
    } else {
      wx.navigateBack()
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      var prevPage = pages[pages.length - 2]; //上一级页面
      // 直接调用上一级页面page对象，存储数据到上一级页面中
      prevPage.setData({
        inTime: inTime,
        outTime: outTime,
        state: 1
      })
    }
  },
  onLoad(options) {
    var that = this;
    // 获取本月时间
    var nowTime = new Date();
    var year = nowTime.getFullYear();
    var month = nowTime.getMonth();
    var time = [];
    var timeArray = {};
    // 循环6个月的数据
    for (var i = 0; i < 3; i++) {
      var y = month + i > 12 ? year + 1 : year;
      var m = month + i > 12 ? (i - 1) : month + i;
      // console.log("onLoad" + y, m)
      // 每个月的数据
      time = that.dataInit(y, m);
      // 接收数据
      timeArray[y + '-' + (m < 10 ? '0' + m : m) ] = time;
    };
    that.setData({
      year: year,
      month: month,
      calendar: timeArray
    });
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {},
})

美中不足:没有实现滚动加载切换上一个月与下一个月