微信小程序酒店日历超强功能
首先利用date拿到年月日
月记得+1 ,因为是从0开始的
先遍历月份,跨年年+1 ,月归至1;
然后遍历天数,
来一个二维数组,在里面加自己想要的属性
如果需求需要加节假日,就给一个数组,遍历天数是满足条件则显示对应的名字;
如果需求需要加忙碌时间,或者特定区间段里价格不同,搞特价就利用map遍历月份,将满足条件的添加属性标志位即可。

可以考虑,用我这个方法。将不同年不同月不同日或者同年不同月不同日或者同年同月不同日的筛选出来;
然后想点击入住或者离店;
在这之前先给标签加data-i 以及 data-x 一个是标签所在的月份,一个是标签所在的天数;就可以做对应的改变样式
入住是第一次点击,离店时第二次点击;
做一个判断;
入住则改变对应月份里的天数的样式;当然要遍历一下;(点击事件,然后获取当前点击元素的对应所在月份和对应所在天数);
离店则要拿到离店对应的月份里的天数和入住对应的月份里的天数;俩者做差,将天数算出;(同一个点击事件,判断是不是第一次点击,可以把第一次点击的月份和天数存在一个对象里,判断这个对象是否存在值,存在则是第一次点,不存在则第二次点击);
然后进行遍历,由于遍历的时候当前月的索引是0,所以只用考虑月份和天数;判断月份如果第二次点的月份减去第一次的月份是0 则是同月 ; 同月就相减即可; 反之 则是跨月或者跨年(这时候跨年和跨月是一样的,因为转化为了数组索引;索引没有负数,所以只有0 和 整数),就把遍历 (月的天数减去当前索引月份的天数)+后面几个月的天数 ) ;


根据条件判断是跨年还是跨月,如果跨月则天数归零,月份加一;
这样头,中间,尾巴都出来了;
最后做的处理就是其他的状况,出现这些状况就只会出现入住状态;像美团那种感觉;
微信小程序酒店日历超强功能的更多相关文章
- 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)
微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...
- 微信小程序产品定位及功能介绍
产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...
- 让你的微信小程序具有在线支付功能
前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...
- (三)微信小程序首页的分类功能和搜索功能的实现笔记
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 微信小程序开发平台新功能「云开发」快速上手体验
微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...
- 微信小程序又一爆炸功能上线-云开发
云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...
- 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)
问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...
- 微信小程序——极点日历使用方法
极点日历github项目地址 添加至自己的小程序方法 极点日历属性接口文档 代码实例: xml: <calendar calendar-style="calendar" he ...
随机推荐
- Nacos 发布 1.0.0 GA 版本,可大规模投入到生产环境
经过 3 个 RC 版本的社区体验之后,Nacos 正式发布 1.0.0 GA 版本,在架构.功能和 API 设计上进行了全方位的重构和升级. 1.0.0 版本的发布标志着 Nacos 已经可以大规模 ...
- React Native等比放大不丢失图片
9月11号 0.33版本,resizeMode中添加了center, 可以实现一样的功能.不过希望这篇文章还能帮助大家. 之前我们学习了从零学React Native之08Image组件 大家可以发现 ...
- 微信小程序封装自定义弹窗
最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件.记录一下. 具体代码如下: 业务代码中 ...
- Android教程 -05 Android6.0权限的管理
视频为本篇博客知识的讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷 上篇文章我们讲解了通过隐式意图拨打电话,在AndroidManifest.xml文件中添加了权限 <uses-permis ...
- windows/Linux/Mac下安装maven,maven作用
Linux下安装maven 1.首先到Maven官网下载安装文件,目前最新版本为3.0.3,下载文件为apache-maven-3.3.9-bin.tar.gz,下载可以使用wget命令: 2.进入下 ...
- Java RandomAccessFile用法(转载)
RandomAccessFile RandomAccessFile是用来访问那些保存数据记录的文件的,你就可以用seek( )方法来访问记录,并进行读写了.这些记录的大小不必相同:但是其大小和位置必须 ...
- Java反射机制(二):通过反射取得类的结构
在反射运用过程中,如果你想得到一个类的完整结构,那么就要使用到java.lang.reflect包中的几个类: · Constructor 表示类中的构造方法 · Field 表示类中的属性 · ...
- 如何用简单易懂的例子解释条件随机场(CRF)模型?它和HMM有什么区别?
https://www.zhihu.com/question/35866596/answer/418341940
- 洛谷P5020 货币系统 题解 模拟
题目链接:https://www.luogu.org/problem/P5020 这道题目是一道模拟题,但是又有一点多重背包的思想在里面. 首先我们定义一个 vis[i] 来表示和为 i 的情况在之前 ...
- element-ui隐藏组件el-scrollbar
代码如下: <div class="main_wrapper"> <el-scrollbar wrapClass="scrollar_container ...