小程序日历 日期选择（可多选）

20191114104607.png

index.wxml

日期可多选

  
    
      {{thisYear}}年
      {{thisMonth}}月
    
    
      日
      一
      二
      三
      四
      五
      六
    
    
    
        {{item[0]['date']}}
        {{item[1]['date']}}
        {{item[2]['date']}}
        {{item[3]['date']}}
        {{item[4]['date']}}
        {{item[5]['date']}}
        {{item[6]['date']}} 
    
    
  

  
    
      {{nextYear}}年
      {{nextMonth}}月
    
    
      日
      一
      二
      三
      四
      五
      六
    
    
    
        {{item[0]['date']}}
        {{item[1]['date']}}
        {{item[2]['date']}}
        {{item[3]['date']}}
        {{item[4]['date']}}
        {{item[5]['date']}}
        {{item[6]['date']}} 
    
    
  


确定

index.wxss

.tips {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  background: #e6f2ff;
  text-align: center;
  font-size: 28rpx;
  color: #888888;
}
.calendar {
  width: 100%;
  height: auto;
  background: #F9F9F9;
  overflow: hidden;
}
.calendar .year_month {
  width: 100%;
  height: 120rpx;
  line-height: 120rpx;
  text-align: right;
  border-bottom: #e6e6e6 1px solid;
}
.calendar .year_month .year {
  font-size: 28rpx;
  padding-right: 20rpx;
}
.calendar .year_month .month {
  font-size: 52rpx;
  padding-right: 20rpx;
}
.calendar .week {
  margin: 0 25rpx;
  height: auto;
  overflow: hidden;
}
.calendar .week text {
  width: 100rpx;
  margin: 0 auto;
  text-align: center;
  height: 100rpx;
  font-size: 36rpx;
  display: flex;
  float: left;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: #FFF 1px solid;
}
.calendar .week .saturday {
  /* color: #e64340; */
}
.calendar .week .sunday {
  /* color: #10aeff; */
}
.calendar .week .now {
  border: none;
  border-bottom: #FFF 1px solid;
  /* border-bottom: #e64340 1px solid; */
  border-radius: 0;
}
.calendar .week .selected {
  border: none;
  background: #F0CF61;
  /* border-bottom: #F0CF61 1px solid; */
  color: #FFF;
}
.calendar .week .disabled {
  border: none;
  border-bottom: #FFF 1px solid;
  color: #E5E5E5;
}

.submitButton{
  margin: 20rpx 32rpx;
  height: 92rpx;
  line-height: 92rpx;
  text-align: center;
  font-size: 34rpx;
  color: #493D34;
  background: #F7E6B2;
  border-radius: 16rpx;

}
.submitButton:active {
  opacity: .6;
}

index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisYear: '',
    thisMonth: '',
    thisMonthArr: [],
    today: new Date().getDate(),
    nextYear: '',
    nextMonth: '',
    nextMonthArr: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //初始化日历数据
    var nextM_start = new Date(new Date(new Date().toLocaleDateString()).setMonth(new Date().getMonth() + 1)); //下一个月
    var thisMonthArr = this.getDateArr(new Date());
    var nextMonthArr = this.getDateArr(nextM_start);
    this.setData({
      thisYear: new Date().getFullYear(),
      thisMonth: new Date().getMonth() + 1,
      nextYear: nextM_start.getFullYear(),
      nextMonth: nextM_start.getMonth() + 1,
      thisMonthArr: thisMonthArr,
      nextMonthArr: nextMonthArr
    })
  },

  select_date: function (e) {
    //如果点击项为空百项目，不继续执行
    var date = e.currentTarget.dataset.date;
    if (date == '' || date <= 0) {
      return;
    }
    var index = e.currentTarget.dataset.key;
    var item = e.currentTarget.dataset.keyitem;
    var month = e.currentTarget.dataset.month;
    if (month == 'thisMonth') {
      var that = this.data.thisMonthArr;
    } else {
      var that = this.data.nextMonthArr;
    }
    //切换选中状态
    if (that[index][item].state == true) {
      that[index][item].state = false;
    } else if (that[index][item].state == false) {
      that[index][item].state = true;
    }
    //console.log(that);
    //根据月份设置数据
    if (month == 'thisMonth') {
      this.setData({
        thisMonthArr: that,
      });
    } else {
      this.setData({
        nextMonthArr: that,
      });
    }
  },

  //根据指定年月获得当月天数
  mGetDate(year, month) {
    var d = new Date(year, month, 0);
    return d.getDate();
  },
  //根据指定年月获得当月日历数组
  getDateArr(date) {
    //根据指定年月
    //var myDate = new Date();
    var myDate = date;
    var thisYear = myDate.getFullYear(); //获取完整的年份
    var thisMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    var firstDay = new Date(thisYear + ',' + thisMonth + ',01').getDay(); //本月第一天星期几,0表示星期天
    var nowDay = myDate.getDate(); // 今天是几号
    var monthNum = this.mGetDate(thisYear, thisMonth); //本月多少天

    var monthArray = [];
    var week = 1; //第一周
    var oneDay = '';
    var isToday = false;
    monthArray[week] = new Array(); //声明本周的二维数组

    //循环当月的每一天
    for (var k = 1; k <= monthNum; k++) {
      isToday = false;
      //组装当前日期
      oneDay = thisYear + ',' + thisMonth + ',' + k;
      var witchDay = new Date(oneDay).getDay(); //当前是星期几
      //如果当期循环日期为今天
      if (k == nowDay) {
        isToday = true;
      }
      //如果是第一周
      if (week == 1) {
        //判断当前日期是否是本月第一天
        if (k == 1) {
          //第一天之前的日期补为空
          for (var a = 0; a < firstDay; a++) {
            monthArray[week][a] = {
              date: '',
              isToday: isToday,
              state: false
            };
          }
        }
      }
      monthArray[week][witchDay] = {
        date: k,
        isToday: isToday,
        state: false
      };

      //如果已经是周六，切换到下一周
      if (witchDay == 6) {
        week++;
        monthArray[week] = new Array(); //声明本周的二维数组
      }
    }
    monthArray.splice(0, 1); //删除下标为0的空元素
    //console.log(monthArray);
    return monthArray;
  },
  // 确认提交选项
  confirmSelect() {
    const { thisYear, thisMonth, thisMonthArr, nextYear, nextMonth, nextMonthArr } = this.data;
    let selDateArr = [];
    // 第一个月
    for (const week of thisMonthArr) {
      for (const day of week) {
        if (day.state) {
          selDateArr.push(`${thisYear}-${thisMonth}-${day.date}`);
        }
      }
    }
    // 第二个月
    for (const week of nextMonthArr) {
      for (const day of week) {
        if (day.state) {
          selDateArr.push(`${nextYear}-${nextMonth}-${day.date}`);
        }
      }
    }
    console.log(selDateArr);
  }
})