首先利用date拿到年月日

月记得+1 ,因为是从0开始的

先遍历月份,跨年年+1 ,月归至1;

然后遍历天数,

lastDat = new Date(val.year,val.month,0).getDate  ; 这个表达式可以获得当前月的最后一天,就不用取分闰年或者平年了;一句代码就可以解决很多判断,这个是蛮不错的。
获取月最后一天,就可以拿到每个月了。自己想遍历多少就多少;
 

来一个二维数组,在里面加自己想要的属性

如果需求需要加节假日,就给一个数组,遍历天数是满足条件则显示对应的名字;

如果需求需要加忙碌时间,或者特定区间段里价格不同,搞特价就利用map遍历月份,将满足条件的添加属性标志位即可。

可以考虑,用我这个方法。将不同年不同月不同日或者同年不同月不同日或者同年同月不同日的筛选出来;

然后想点击入住或者离店;

在这之前先给标签加data-i 以及 data-x   一个是标签所在的月份,一个是标签所在的天数;就可以做对应的改变样式

入住是第一次点击,离店时第二次点击;

做一个判断;

入住则改变对应月份里的天数的样式;当然要遍历一下;(点击事件,然后获取当前点击元素的对应所在月份和对应所在天数);

离店则要拿到离店对应的月份里的天数和入住对应的月份里的天数;俩者做差,将天数算出;(同一个点击事件,判断是不是第一次点击,可以把第一次点击的月份和天数存在一个对象里,判断这个对象是否存在值,存在则是第一次点,不存在则第二次点击);

然后进行遍历,由于遍历的时候当前月的索引是0,所以只用考虑月份和天数;判断月份如果第二次点的月份减去第一次的月份是0 则是同月 ;   同月就相减即可; 反之 则是跨月或者跨年(这时候跨年和跨月是一样的,因为转化为了数组索引;索引没有负数,所以只有0 和 整数),就把遍历 (月的天数减去当前索引月份的天数)+后面几个月的天数  )  ;

根据条件判断是跨年还是跨月,如果跨月则天数归零,月份加一;

这样头,中间,尾巴都出来了;

最后做的处理就是其他的状况,出现这些状况就只会出现入住状态;像美团那种感觉;

微信小程序酒店日历超强功能的更多相关文章

  1. 微信小程序仿朋友圈功能开发(发布、点赞、评论等功能)

    微信小程序仿朋友圈功能开发(发布.点赞.评论等功能) 1.项目分析 项目整体分为三个部分 发布 展示 详情页 graph LR 朋友圈发布 --内容发布--> 内容展示 内容展示 --点击展示卡 ...

  2. 微信小程序产品定位及功能介绍

    产品定位及功能介绍 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序注册 注册小程序帐号 在微信公众平台官网首页(mp.weixin.qq ...

  3. 让你的微信小程序具有在线支付功能

    前言 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过 ...

  4. (三)微信小程序首页的分类功能和搜索功能的实现笔记

    就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...

  5. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  6. 微信小程序开发平台新功能「云开发」快速上手体验

    微信小程序开发平台刚刚开放了一个全新的功能:云开发. 简单地说就是将开发人员搭建微信小程序后端的成本再次降低,此文刚好在此产品公测时,来快速上手看看都有哪些方便开发者的功能更新. 微信小程序一直保持一 ...

  7. 微信小程序又一爆炸功能上线-云开发

    云开发介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开 ...

  8. 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...

  9. 微信小程序——极点日历使用方法

    极点日历github项目地址 添加至自己的小程序方法 极点日历属性接口文档 代码实例: xml: <calendar calendar-style="calendar" he ...

随机推荐

  1. 洛谷3067 BZOJ 2679题解(折半搜索)

    传送门 BZOJ传送门(权限题) 看到n小于20,就可以想到搜索 所有的数要么在集合a中,要么在集合b中,要么都不在 可是3^n复杂度会炸,我们考虑优化 可以利用折半搜索,将前面一半的所有可能情况与后 ...

  2. 洛谷4178 BZOJ1468 Tree题解点分治

    点分治的入门练习. 题目链接 BZOJ的链接(权限题) 关于点分治的思想我就不再重复了,这里重点说一下如何判重. 我们来看上图,假设我们去除了1节点,求出d[2]=1,d[3]=d[4]=2 假设k为 ...

  3. TCP/IP网络编程 读书笔记1

    本篇主干内容是TCP/IP网络编程1-9章学习笔记 1. linux文件描述符 描述符从3开始以由小到大的顺序编号,0,1,2,分配给标准I/O用作标准输入.标准输出和标准错误. 2. 协议族与套接字 ...

  4. oracle函数 end

    [功能]当:<表达式>=<表达式条件值1……n> 时,返回对应 <满足条件时返回值1……n> 当<表达式条件值1……n>不为条件表达式时,与函数deco ...

  5. 一线实践 | 借助混沌工程工具 ChaosBlade 构建高可用的分布式系统

    在分布式架构环境下,服务间的依赖日益复杂,可能没有人能说清单个故障对整个系统的影响,构建一个高可用的分布式系统面临着很大挑战.在可控范围或环境下,使用 ChaosBlade 工具,对系统注入各种故障, ...

  6. day3_python之函数返回值、语句形式、表达式形式

    一. 函数对象 1. 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 #3 返回值可以是函数 #3 可以当作容器类型的元素 二.返回值 return的返回值没有类型 ...

  7. poj 1263 Reflections (Simple Geometry)

    1263 -- Reflections 简单计算几何.题目给出射线以及若干个不相交的圆,求出射线会在哪些圆上反弹,依次写出反弹球的编号. 代码如下: #include <cstdio> # ...

  8. Timer更新UI的合理办法

    using System; using System.Windows; using System.Timers; using System.Windows.Threading; namespace T ...

  9. HDU 2602Bone Collector 01背包问题

    题意:给出一个t代表有t组数据,然后给出n,n代表有n种石头,v代表旅行者的背包容量,然后给出n种石头的价值和容量大小,求能带走的最大价值 思路:01背包问题,每种石头只有拿与不拿两种状态.(其实我是 ...

  10. H3C PPP MP配置示例二