微信小程序实现酒店入住时间区间选择日历

组件版1：https://pan.baidu.com/s/1Iie3Fxgc6RjLQr1pYJk_BQ （下载即可用）

下面代码除农历显示不出来（把显示农历的地方删除，有提示！！！【】！！！），复制可以直接使用。

代码如下：

rili.wxss:

page{height: 100%;position: relative;}/****************日历样式**********************/.page{height:100%;position: fixed;top: 100%;background-color: #fff;}.scroll{height: 100%;position: relative;}.scroll1{height: calc(100% - 160rpx);padding-top: 160rpx;}.top{display: flex;flex-flow: row;flex-wrap: nowrap;justify-content: space-around;align-items: center;}.dianxian{width: 100%;}.xianRi{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;border-bottom:2rpx #ccc solid;}.zhiDing1{position:absolute;width: 100%;height: 80rpx;border-top:2rpx #ccc solid;border-bottom:2rpx #ccc solid;}.zhiMian{width: 92%;margin: 0 auto;height: 80rpx;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;}.quZI{font-size: 28rpx;color:red;}.quZI1{font-size: 28rpx;color:#999;}.zhiDing{position:absolute;width: 100%;height: 80rpx;top: 80rpx;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}.zhiDing .list:first-child,.zhiDing .list:last-child{color:red}.xianRi:first-child{margin-top: 30rpx;}.xianriLI_1{width: 100%;padding:30rpx 0 10rpx 4%;font-size: 28rpx;font-weight: bold;}.xianriLI{width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: center;}.zhiDing .list,.xianRi .xianriLI .list{display: flex;justify-content: center;align-items: center;width:calc(100%/7);height: 70rpx;margin: 5px 0;font-size: 24rpx;}.xianRi .xianriLI .list{position: relative;z-index: 9;}.day{background-color: red;color: #fff;border-radius: 50rpx;border: 2rpx red solid;}.xaunDay{border: 2rpx red solid !important;border-radius: 50rpx;}.quShang{color:#ccc;opacity: 0;}.quXia{color:#ccc;opacity: 0;}.xuanZ{display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-items: center;}.zuoyou{width: 120rpx;text-align: center}.hui{color: #ccc;}.xianDayaRi{position: relative;z-index: 9;height: 70rpx;width: 70rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;}.xuanbgDate{background-color: #fff;color:#000;}.bgDate{background-color:rgba(128, 248, 252, 0.5);}.qiangXuan{background-color: rgba(128, 248, 252, 0.5);position: absolute;z-index: 1;right: 0;width: 60rpx;height: 70rpx;}.houXuan{background-color:rgba(128, 248, 252, 0.5);position: absolute;z-index: 1;left: 0;width: 60rpx;height: 70rpx;}.ruzhu{font-size: 20rpx;font-weight: bold;color: red}.likai{font-size: 20rpx;font-weight: bold;color: red}.ziDaXIao{font-size: 20rpx;}/********************************************/.xianShi{width: 100%;display: flex;justify-content: flex-start;align-items: center;}.starTime,.endTime{flex: 3;display: flex;justify-content: center;align-items: center;font-size: 28rpx;}.quJian{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 28rpx;}

rili.wxml:

<view animation="{{animationData}}" class="page" id="page"><view class="scroll" ><view class="zhiDing1"><view class="zhiMian"><view class="quZI" bindtap='quXiao'>取消</view><view class="quZI1" bindtap='quding'>确定</view></view></view><view class="zhiDing"><view class="list " wx:for="{{date}}" wx:key="{{date}}">{{item}}</view></view><scroll-view class="scroll1" scroll-y='true' scroll-into-view='{{tiao}}' ><view id="tiao"></view><view class="xianRi" wx:for="{{xianShiZongData}}" wx:for-item='list' wx:key="list.id"><view class="xianriLI_1">{{list.xian}}</view><view class='xianriLI'><view class="list quXia" wx:for="{{list.shangData}}" wx:key="{{shangY}}">{{item}}</view><view wx:if="{{xianShi==list.xian && item.data<xianDay}}" class="list hui" wx:for="{{list.xainData}}" wx:key="{{dateArr}}">{{item.data}}</view><!-- <view wx:if="{{xianShi==list.xian && item.data>=xianDay || xianShi!=list.xian}}" class="list {{xianShi==list.xian && xianDay==item.data?'day':''}} {{xuanShiJian==list.xian && xuanDayShi==item.data?'xaunDay':''}}" wx:for="{{list.xainData}}" wx:key="{{dateArr}}" bindtap='dianXuan' data-day='{{item.data}}' data-shi='{{list.xian}}'>{{item.data}}</view> --><view wx:if="{{xianShi==list.xian && item.data>=xianDay || xianShi!=list.xian}}" class="list {{(item.getTime>xuanZheData[0].getTime && item.getTime<xuanZheData[1].getTime)?'bgDate':''}}" wx:for="{{list.xainData}}" wx:key="{{dateArr}}" bindtap='dianXuan' data-day='{{item.data}}' data-shi='{{list.xian}}'><view wx:if='{{xuanZheData.length==2 && item.getTime==xuanZheData[0].getTime}}' class='qiangXuan'></view><view wx:if='{{xuanZheData.length==2 && item.getTime==xuanZheData[1].getTime}}' class='houXuan'></view><view class="xianDayaRi {{xuanZheData.length==2 && (item.getTime==xuanZheData[0].getTime||item.getTime==xuanZheData[1].getTime)?'xuanbgDate':''}} {{xianShi==list.xian && xianDay==item.data?'day':''}} {{(xuanZheData[0].xuanShiJian==list.xian && xuanZheData[0].xuanDayShi==item.data)||(xuanZheData[1].xuanShiJian==list.xian && xuanZheData[1].xuanDayShi==item.data)?'xaunDay':''}}"><view>{{item.data}}</view><view wx:if='{{xuanZheData.length==2 && item.getTime==xuanZheData[0].getTime}}' class='ruzhu'>{{xuanZheData[0].text}}</view><!-- ↓显示农历↓ --><view class='ziDaXIao' wx:if='{{item.getTime!=xuanZheData[0].getTime && item.getTime!=xuanZheData[1].getTime}}'>{{item.isNjieri==true?item.Njieri:( item.IDayCn=='初一'?item.IMonthCn:item.IDayCn)}}</view><!-- ↑显示农历↑ --><view wx:if='{{xuanZheData.length==2 && item.getTime==xuanZheData[1].getTime}}' class='likai'>{{xuanZheData[1].text}}</view></view></view><view class="list quXia" wx:for="{{list.xiaData}}" wx:key="{{xiaY}}">{{item}}</view></view></view></scroll-view></view></view><view class='xianShi'><view class='starTime' bindtap='xianShi'>开始时间:<span wx:if='{{xuanZheData.length>=1}}' style='font-size: 32rpx;color:red'>{{xuanZheData[0].xuanShiJian}}-{{xuanZheData[0].xuanDayShi}}</span><span wx:else>请选择开始时间</span></view><view class='quJian'><view>共</view><view><span wx:if='{{xuanZheData.length>=2}}' style='font-size: 36rpx;color:red'>{{xuanZheData[1].chaDay}}</span><span wx:else>选择中</span></view><view>晚</view></view><view class='endTime' bindtap='xianShi'>结束时间:<span wx:if='{{xuanZheData.length>=2}}' style='font-size: 32rpx;color:red'>{{xuanZheData[1].xuanShiJian}}-{{xuanZheData[1].xuanDayShi}}</span><span wx:else>请选择结束时间</span></view></view>

rili.js

var bianLIyear;var bianLImonth;var bianLIday;var riLi = []var shangY = []var xiaY = []var xianxuNZ = [];var xuanZheData=[];var windowHeight;var util = require('../utils/util.js');//获取农历的方法引入Page({data: {date: ['日', '一', '二', '三', '四', '五', '六'],year: null,//遍历的年month: null,//遍历的月day: null,xianShi: null,//今天的年月xianDay: null,//几天的日期xianShiZongData:[],//今后7个月遍历的日期jiaShu:1,animationData:''},onLoad: function () {this.yunXian();wx.getSystemInfo({success: function (res) {windowHeight = res.windowHeight}})},onReady:function(){},//运行,循环获取加上本月与未来6个月,共七个月的数据yunXian:function(){var myDate = new Date();var year = myDate.getFullYear()var month = myDate.getMonth() + 1var day = myDate.getDate()var jiaYue = month+6;//要循环的月份var shangBu;var xiabu;if (jiaYue>12){shangBu=12xiabu = jiaYue-12}else{console.log(jiaYue)}if (jiaYue>12){for (let l = year; l <= parseInt(year) + 1; l++) {if (jiaYue > 12) {if (l == year) {for (let ll = month; ll <= shangBu; ll++) {bianLIyear = l;bianLImonth = ll;bianLIday = daythis.kaiSHiyun();}}else {for (let ll = 1; ll <= xiabu; ll++) {bianLIyear = l;bianLImonth = ll;bianLIday = daythis.kaiSHiyun();}}}}}else{for (let l = year; l <= parseInt(year); l++) {for (let ll = month; ll <= jiaYue; ll++) {bianLIyear = l;bianLImonth = ll;bianLIday = daythis.kaiSHiyun();}}}if (month.toString().length < 2){month = '0' + month}else{month = month}this.setData({xianShiZongData: xianxuNZ,xianShi: year + '-' + month,xianDay: day,})console.log(this.data.xianShiZongData)},//计算每个月的数据kaiSHiyun:function(){riLi = []shangY = []xiaY = []var dayNum = new Date(bianLIyear, bianLImonth, 0).getDate();var dayNumS = new Date(bianLIyear, parseInt(bianLImonth) - 1, 0).getDate();var dayNumX = new Date(bianLIyear, parseInt(bianLImonth) + 1, 0).getDate();var startWeek = new Date('' + bianLIyear + '/' + bianLImonth + '/1').getDay(); )for (var ij = startWeek - 1; ij >= 0; ij--) {shangY.push(parseInt(dayNumS) - parseInt(ij))}for (var ii = 1; ii <= dayNum; ii++) {var riqi = {};riqi.data = ii;riqi.Num = startWeek + (ii - 1) % 7riqi.getTime = new Date(bianLIyear + '/' + bianLImonth + '/' + ii).getTime();/*↓插入引用方法农历等详情↓*/var xiangQing = util.chajie(bianLIyear, bianLImonth, ii)riqi.lYear = xiangQing.lYearriqi.lMonth = xiangQing.lMonthriqi.lDay = xiangQing.lDayriqi.Animal = xiangQing.Animalriqi.IMonthCn = xiangQing.IMonthCnriqi.IDayCn = xiangQing.IDayCnriqi.cYear = xiangQing.cYearriqi.cMonth = xiangQing.cMonthriqi.cDay = xiangQing.cDayriqi.gzYear = xiangQing.gzYearriqi.gzMonth = xiangQing.gzMonthriqi.gzDay = xiangQing.gzDayriqi.isToday = xiangQing.isTodayriqi.isLeap = xiangQing.isLeapriqi.nWeek = xiangQing.nWeekriqi.ncWeek = xiangQing.ncWeekriqi.isTerm = xiangQing.isTermriqi.Term = xiangQing.Termriqi.astro = xiangQing.astroriqi.festival = xiangQing.festival,riqi.isFestival = xiangQing.isFestivalriqi.Njieri = xiangQing.Njieririqi.isNjieri = xiangQing.isNjieri/*↑插入引用方法农历等详情↑*/riLi.push(riqi)}var shu = riLi.length + shangY.length;if (shu % 7>0){for (var ijj = 1; ijj <= 7 - shu % 7; ijj++) {xiaY.push(ijj)}}var panXZhong = {};var jiaBianLiyueif (bianLImonth.toString().length<2){jiaBianLiyue = '0' + bianLImonth}else{jiaBianLiyue = bianLImonth}panXZhong.xian = bianLIyear + '-' + jiaBianLiyuepanXZhong.xainData = riLipanXZhong.shangData = shangYpanXZhong.xiaData = xiaYxianxuNZ.push(panXZhong)},//点击选择时间dianXuan:function(e){var shiJIan = e.currentTarget.dataset.shi + '-' + e.currentTarget.dataset.dayvar xuanriArr = shiJIan.split("-");var shiJIanHaoMiao = new Date(shiJIan.replace(new RegExp("-", "gm"), "/")).getTime()var chang = windowHeight;var that = this;var cunIndex=-1;var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 1000,timingFunction: "ease",delay: 0})animation.translateY(chang).step()if (xuanriArr[1].length < 2) {var xuanYue = '0' + xuanriArr[1]}else {var xuanYue = xuanriArr[1]}if (xuanriArr[2].length < 2) {var xuanRi = '0' + xuanriArr[2]}else {var xuanRi = xuanriArr[2]}for (let d = 0; d < xuanZheData.length; d++) {if (shiJIanHaoMiao == xuanZheData[d].getTime) {cunIndex = d}}if (cunIndex != -1) {xuanZheData.splice(cunIndex, 1)}else {if (xuanZheData.length < 2) {if (xuanZheData.length >= 1) {var firstZHI = xuanZheData[0].xuanShiJian + '-' + xuanZheData[0].xuanDayShifirstZHI = firstZHI.replace(new RegExp("-", "gm"), "/")var twoZHI = e.currentTarget.dataset.shi + '-' + e.currentTarget.dataset.daytwoZHI = twoZHI.replace(new RegExp("-", "gm"), "/")//console.log('firstZHI', firstZHI)//console.log('twoZHI', twoZHI)if (new Date(twoZHI).getTime() < new Date(firstZHI).getTime()) {var cha = new Date(firstZHI).getTime() - new Date(twoZHI).getTime()xuanZheData.splice(0, 0, { xuanShiJian: e.currentTarget.dataset.shi, xuanDayShi: e.currentTarget.dataset.day, getTime: shiJIanHaoMiao })xuanZheData[1].chaDay = parseInt(cha / 86400000)delete xuanZheData[0].chaDay;}else {var cha = new Date(twoZHI).getTime() - new Date(firstZHI).getTime()xuanZheData.push({ xuanShiJian: e.currentTarget.dataset.shi, xuanDayShi: e.currentTarget.dataset.day, getTime: shiJIanHaoMiao, chaDay: parseInt(cha / 86400000) })delete xuanZheData[0].chaDay;}}else {xuanZheData.push({ xuanShiJian: e.currentTarget.dataset.shi, xuanDayShi: e.currentTarget.dataset.day, getTime: shiJIanHaoMiao })}}else {var firstZHI = xuanZheData[0].xuanShiJian + '-' + xuanZheData[0].xuanDayShifirstZHI = firstZHI.replace(new RegExp("-", "gm"), "/")var twoZHI = e.currentTarget.dataset.shi + '-' + e.currentTarget.dataset.daytwoZHI = twoZHI.replace(new RegExp("-", "gm"), "/")if (new Date(twoZHI).getTime() < new Date(firstZHI).getTime()) {var cha = new Date(firstZHI).getTime() - new Date(twoZHI).getTime()xuanZheData.splice(0, 0, { xuanShiJian: e.currentTarget.dataset.shi, xuanDayShi: e.currentTarget.dataset.day, getTime: shiJIanHaoMiao })xuanZheData[1].chaDay = parseInt(cha / 86400000)delete xuanZheData[0].chaDay;xuanZheData.splice(2, 1)}else {var cha = new Date(twoZHI).getTime() - new Date(firstZHI).getTime()xuanZheData.splice(1, 1, { xuanShiJian: e.currentTarget.dataset.shi, xuanDayShi: e.currentTarget.dataset.day, getTime: shiJIanHaoMiao, chaDay: parseInt(cha / 86400000) })delete xuanZheData[0].chaDay;}}}var thatBIanHUanif (xuanZheData.length >= 2) {thatBIanHUan = animation.export()}else {thatBIanHUan = null}if (xuanZheData.length == 2){xuanZheData[0].text = '入住'; xuanZheData[1].text = '离开'}else{//console.log(xuanZheData[0])if (xuanZheData[0]){delete xuanZheData[0].text;}if (xuanZheData[1]){delete xuanZheData[1].text;}}//console.log(xuanZheData)that.setData({animationData: thatBIanHUan,xuanShiJian: e.currentTarget.dataset.shi,xuanDayShi: e.currentTarget.dataset.day,xuanri: xuanYue + '-' + xuanRi,xuanZheData: xuanZheData})// wx.showToast({// title:shiJIan,// icon: 'success',// duration: 2000// })},quXiao: function () {var chang = windowHeight;var that = this;var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 1000,timingFunction: "ease",delay: 0})xuanZheData = []animation.translateY(chang).step()that.setData({animationData: animation.export(),tiao: 'tiao',xuanShiJian: "",xuanDayShi: "",xuanri: "",xuanZheData: xuanZheData})},quding:function(){var chang = windowHeight;var that = this;var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 1000,timingFunction: "ease",delay: 0})if (xuanZheData.length == 1) {wx.showModal({title: '提示',content: '第一次选择的是开始时间!',showCancel: false,success: function (res) {}})}animation.translateY(chang).step()that.setData({xuanZheData: xuanZheData,animationData: animation.export(),})},/****************其他事件************************* */xianShi:function(){var chang = windowHeight;var that = this;var animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 500,timingFunction: "ease",delay: 0})animation.translateY(-chang).step()that.setData({animationData: animation.export()})}})

下载地址：https://download.csdn.net/download/qq_40591925/10832473

网页版日历：https://blog.csdn.net/qq_40591925/article/details/84893012

微信小程序实现酒店入住时间区间选择日历相关推荐

微信小程序用picker-view 实现时间的选择及加减
微信小程序js部分 // addons/auct/tong2/tong2.js const date = new Date(); const days = []; const hours = []; ...
微信小程序修改顶部电量时间的颜色
微信小程序修改顶部电量时间的颜色 onShow: function () {wx.setNavigationBarColor({frontColor: '#ffffff',backgroundC ...
微信小程序实现缓存过期时间
微信小程序实现缓存过期时间前言一.设置缓存二.得到缓存总结前言先来看看官方文档 wx.setStorageSync(string key, any data) 将数据存储在本地缓存中指定的 ...
微信小程序获取当前系统时间以及判断周几
微信小程序获取当前系统时间以及判断周几首先获取当前日期在utils文件加中创建问价util.js function formatTime(date) {var year = date.getFul ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
基于微信小程序的酒店预定管理系统报告+PPT+项目前后台源码及数据库文件
摘要随着Internet 爆炸式的发展,互联网技术在我们的生活中无处不在,扮演着重要的角色.自我国加入WTO以后,电子商务在国内也迅速的发展了起来,现在互联网上各种电子商务网站更是迅速的增长.网络 ...
微信小程序根据日期和时间进行排序
一.前言最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助. 二.需求分析(这是已完成 ...
微信小程序解决ios端时间格式兼容的问题
微信小程序获取当时时间new Date时,会在ios真机上出现问题,具体表现为时间格式会报错并显示出NaN.这个bug并不会在模拟器和安卓系统出现,只会在ios系统上出现,具体原因是ios不支持符号 ...
小程序源码：喝酒娱乐小游戏助力神器微信小程序源码下载多种游戏选择玩法多种
大家好今天给大家带来另外一款喝酒小神器好像记得小编之前也发过好几款这种小程序源码吧但是每一款的UI或者功能什么的都还是会有所不一样的大家也可以找找之前所发的那几款对比一下然后决定自己需要哪一款哟 ...

微信小程序实现酒店入住时间区间选择日历

微信小程序实现酒店入住时间区间选择日历相关推荐

最新文章

热门文章