微信小程序日历插件怎么实现

这篇文章主要介绍了微信小程序日历插件怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇微信小程序日历插件怎么实现文章都会有所收获，下面我们一起来看看吧。

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

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

  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
 })
 },

关于“微信小程序日历插件怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“微信小程序日历插件怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。