微信小程序日历选择-类似酒店预订方式有节日标识

您当前的位置：首页 > 解决方案

微信小程序日历选择-类似酒店预订方式有节日标识

作者： admin
发布于 2018-06-08 13:43:47
来源：
栏目：解决方案

导语：微信小程序的日历选择，主要针对酒店选择时间段的日历，带有公历的节日。主要函数：通过选择入住与离店时

微信小程序的日历选择，主要针对酒店选择时间段的日历，带有公历的节日。

主要函数：
通过选择入住与离店时间，记录对应的时间段，判断选择的开始时间和结束时间，通过改变背影颜色连成对应时间段。

  selectDataMarkLine: function () {  let dateList = this.data.dateList;  let { checkInDate, checkOutDate } = wx.getStorageSync("ROOM_SOURCE_DATE");  let curreInid = checkInDate.substr(0, 4) + "-" + (checkInDate.substr(5, 2) < 10 ? checkInDate.substr(6, 1) : checkInDate.substr(5, 2));//选择入住的id  let curreOutid = checkOutDate.substr(0, 4) + "-" + (checkOutDate.substr(5, 2) < 10 ? checkOutDate.substr(6, 1) : checkOutDate.substr(5, 2));//选择离店的id  let dayIn = checkInDate.substr(8, 2) >= 10 ? checkInDate.substr(8, 2) : checkInDate.substr(9, 1);//选择入住的天id  let dayOut = checkOutDate.substr(8, 2) >= 10 ? checkOutDate.substr(8, 2) : checkOutDate.substr(9, 1);//选择离店的天id  let monthIn = checkInDate.substr(5, 2) >= 10 ? checkInDate.substr(5, 2) : checkInDate.substr(6, 1);//选择入店的月id  let monthOut = checkOutDate.substr(5, 2) >= 10 ? checkOutDate.substr(5, 2) : checkOutDate.substr(6, 1);//选择离店的月id  if (curreInid == curreOutid) {//入住与离店是当月的情况  for (let i = 0; i < dateList.length; i++) {  if (dateList[i].id == curreInid) {  let days = dateList[i].days;  for (let k = 0; k < days.length; k++) {  if (days[k].day >= dayIn && days[k].day <= dayOut) {               days[k].class = days[k].class + ' bgitem';  }  if (days[k].day == dayIn) {               days[k].class = days[k].class + ' active';               days[k].inday = true;  }  if (days[k].day == dayOut) {               days[k].class = days[k].class + ' active';               days[k].outday = true;  }  }  }  }  } else {//跨月  for (let j = 0; j < dateList.length; j++) {  if (dateList[j].month == monthIn) {//入住的开始月份  let days = dateList[j].days;  for (let k = 0; k < days.length; k++) {  if (days[k].day >= dayIn) {               days[k].class = days[k].class + ' bgitem';  }  if (days[k].day == dayIn) {               days[k].class = days[k].class + ' active';               days[k].inday = true;  }  }  } else {//入住跨月月份  if (dateList[j].month < monthOut) {//离店中间的月份  let days = dateList[j].days;  for (let k = 0; k < days.length; k++) {               days[k].class = days[k].class + ' bgitem';  }  } else if (dateList[j].month == monthOut) {//离店最后的月份  let days = dateList[j].days;  for (let k = 0; k < days.length; k++) {  if (days[k].day <= dayOut) {                 days[k].class = days[k].class + ' bgitem';  }  if (days[k].day == dayOut) {                 days[k].class = days[k].class + ' active';                 days[k].outday = true;  }  }  }  }  }  }  this.setData({       dateList: dateList  })  },

效果图：