欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序日历选择-类似酒店预订方式有节日标识

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:500

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

发布时间:2020-10-21  

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

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

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

效果图:

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