微信小程序—仿美团酒店入住日期时段选择

美团市值突飞猛进，确实霸占了我们的吃喝玩乐，所以想做什么东西，研究一下美团也是不错的。最近需要用到一个酒店入住日期选择的组件，看了一下美团的设计，很好用，在此实现一下。

效果图如下：

体验路径（并获取源码）：

代码逻辑：

var Moment = require("../../utils/moment.js");
var DATE_LIST = [];
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Page({data: {maxMonth: 7, //最多渲染月数dateList: [],systemInfo: {},weekStr: ['日', '一', '二', '三', '四', '五', '六'],checkInDate: Moment(new Date()).format('YYYY-MM-DD'),checkOutDate: Moment(new Date()).add(1, 'day').format('YYYY-MM-DD'),markcheckInDate: false, //标记开始时间是否已经选择markcheckOutDate: false,   //标记结束时间是否已经选择sFtv: [{month:1,day:1,name:"元旦"},{month: 2,day: 14,name: "情人节"},{month: 3,day: 8,name: "妇女节"},{month: 3,day: 12,name: "植树节"},{month: 3,day: 15,name: "消费者权益日"},{month: 4,day: 1,name: "愚人节"},{month: 5,day: 1,name: "劳动节"},{month: 5,day: 4,name: "青年节"},{month: 5,day: 12,name: "护士节"},{month: 6,day: 1,name: "儿童节"},{month: 7,day: 1,name: "建党节"},{month: 8,day: 1,name: "建军节"},{month: 9,day: 10,name: "教师节"},{month: 9,day: 28,name: "孔子诞辰"},{month: 10,day: 1,name: "国庆节"},{month: 10,day: 6,name: "老人节"},{month: 10,day: 24,name: "联合国日"},{month: 12,day: 24,name: "平安夜"},{month: 12,day: 25,name: "圣诞节"}]},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数this.createDateListData();var _this = this;// 页面初始化 options为页面跳转所带来的参数var checkInDate = options.checkInDate ? options.checkInDate : Moment(new Date()).format('YYYY-MM-DD');var checkOutDate = options.checkOutDate ? options.checkOutDate : Moment(new Date()).add(1, 'day').format('YYYY-MM-DD');wx.getSystemInfo({success: function (res) {_this.setData({ systemInfo: res, checkInDate: checkInDate, checkOutDate: checkOutDate });}})},onReady: function () {// 页面渲染完成},onShow: function () {this.selectDataMarkLine()},onHide: function () {// 页面隐藏},onUnload: function () {// 页面关闭},//选择的入住与离店时间段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));//选择入住的idlet curreOutid = checkOutDate.substr(0, 4) + "-" + (checkOutDate.substr(5, 2) < 10 ? checkOutDate.substr(6, 1) : checkOutDate.substr(5, 2));//选择离店的idlet dayIn = checkInDate.substr(8, 2) >= 10 ? checkInDate.substr(8, 2) : checkInDate.substr(9, 1);//选择入住的天idlet dayOut = checkOutDate.substr(8, 2) >= 10 ? checkOutDate.substr(8, 2) : checkOutDate.substr(9, 1);//选择离店的天idlet monthIn = checkInDate.substr(5, 2) >= 10 ? checkInDate.substr(5, 2) : checkInDate.substr(6, 1);//选择入店的月idlet monthOut = checkOutDate.substr(5, 2) >= 10 ? checkOutDate.substr(5, 2) : checkOutDate.substr(6, 1);//选择离店的月idif (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 && dateList[j].month > monthIn) {//离店中间的月份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})},createDateListData: function () {var dateList = [];var now = new Date();/*设置日期为 年-月-01,否则可能会出现跨月的问题比如：2017-01-31为now ,月份直接+1（now.setMonth(now.getMonth()+1)），则会直接跳到跳到2017-03-03月份.原因是由于2月份没有31号，顺推下去变成了了03-03*/now = new Date(now.getFullYear(), now.getMonth(), 1);for (var i = 0; i < this.data.maxMonth; i++) {var momentDate = Moment(now).add(this.data.maxMonth - (this.data.maxMonth - i), 'month').date;var year = momentDate.getFullYear();var month = momentDate.getMonth() + 1;var days = [];var totalDay = this.getTotalDayByMonth(year, month);var week = this.getWeek(year, month, 1);//-week是为了使当月第一天的日期可以正确的显示到对应的周几位置上，比如星期三(week = 2)，//则当月的1号是从列的第三个位置开始渲染的，前面会占用-2，-1，0的位置,从1开正常渲染for (var j = -week + 1; j <= totalDay; j++) {var tempWeek = -1;if (j > 0)tempWeek = this.getWeek(year, month, j);var clazz = '';if (tempWeek == 0 || tempWeek == 6)clazz = 'week'if (j < DATE_DAY && year == DATE_YEAR && month == DATE_MONTH)//当天之前的日期不可用clazz = 'unavailable ' + clazz;elseclazz = '' + clazzdays.push({ day: j, class: clazz })}var dateItem = {id: year + '-' + month,year: year,month: month,days: days}dateList.push(dateItem);}var sFtv = this.data.sFtv;for (let i = 0; i < dateList.length; i++){//加入公历节日for(let k = 0; k < sFtv.length; k++){if (dateList[i].month == sFtv[k].month){let days = dateList[i].days;for (let j = 0; j < days.length; j++){if (days[j].day == sFtv[k].day){days[j].daytext = sFtv[k].name}}}}}this.setData({dateList: dateList});DATE_LIST = dateList;},/** 获取月的总天数*/getTotalDayByMonth: function (year, month) {month = parseInt(month, 10);var d = new Date(year, month, 0);return d.getDate();},/** 获取月的第一天是星期几*/getWeek: function (year, month, day) {var d = new Date(year, month - 1, day);return d.getDay();},/*** 点击日期事件*/onPressDate: function (e) {var { year, month, day } = e.currentTarget.dataset;//当前选择的日期为同一个月并小于今天，或者点击了空白处（即day<0），不执行if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0) return;var tempMonth = month;var tempDay = day;if (month < 10) tempMonth = '0' + monthif (day < 10) tempDay = '0' + dayvar date = year + '-' + tempMonth + '-' + tempDay;//如果点击选择的日期A小于入住时间，则重新渲染入住时间为Aif ((this.data.markcheckInDate && Moment(date).before(this.data.checkInDate) || this.data.checkInDate === date)) {this.setData({markcheckInDate: false,markcheckOutDate: false,dateList: DATE_LIST.concat()});};if (!this.data.markcheckInDate) {this.setData({checkInDate: date,markcheckInDate: true,dateList: DATE_LIST.concat()});} else if (!this.data.markcheckOutDate) {this.setData({checkOutDate: date,markcheckOutDate: true,});//设缓存，返回页面时，可在onShow时获取缓存起来的日期wx.setStorage({key: 'ROOM_SOURCE_DATE',data: {checkInDate: this.data.checkInDate,checkOutDate: this.data.checkOutDate}});wx.navigateBack({delta: 1, // 回退前 delta(默认为1) 页面});}this.renderPressStyle(year, month, day);},renderPressStyle: function (year, month, day) {this.createDateListData();//重新点击时数据初始化var dateList = this.data.dateList;//渲染点击样式for (var i = 0; i < dateList.length; i++) {var dateItem = dateList[i];var id = dateItem.id;if (id === year + '-' + month) {var days = dateItem.days;for (var j = 0; j < days.length; j++) {var tempDay = days[j].day;if (tempDay == day) {days[j].class = days[j].class + ' active';days[j].inday = true;break;}}break;}}this.setData({dateList: dateList});}
})

微信小程序—仿美团酒店入住日期时段选择相关推荐

php 仿美团切换城市,微信小程序仿美团城市选择的实现
这篇文章主要为大家详细介绍了微信小程序仿美团城市选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下代码很简单. var cit ...
微信小程序仿美团城市选择城市切换
原来的城市选择做了一些修改. 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {sea ...
004 - 微信小程序仿美团城市选择城市切换
代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {searchLetter: [],s ...
开发一个微信小程序，对酒店经营管理有哪些好处？
据腾讯2022年第一季度财报数据显示,微信小程序日活跃账户已经突破5亿,流量巨大.不论企业用户还是个体商家都积极使用小程序开展商业活动,从这庞大流量里获利. 酒店行业也不例外,很多酒店都开发了微信小程 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
微信小程序仿网易云音乐（使用云开发，提供源码）
微信小程序仿网易云音乐(使用云开发,提供源码)!!!!!!!!!!! 源码: 链接:https://pan.baidu.com/s/1z_ZnRVbT4vjEENimi8yBQQ 提取码:u0o3 一 ...
微信小程序-仿朋友圈点赞评论操作面板
目录微信小程序-仿朋友圈点赞评论操作面板一.效果二.实现 1.wxml实现 2.js实现 3.wxss实现三.记录 1.dataset使用微信小程序-仿朋友圈点赞评论操作面板一.效果二. ...

微信小程序—仿美团酒店入住日期时段选择

效果图如下：

体验路径（并获取源码）：

代码逻辑：

微信小程序—仿美团酒店入住日期时段选择相关推荐

最新文章

热门文章