微信小程序日历(酒店入住日期选择)

wxml代码。

<!-- 日历-->
<!-- 引入wxs文件，用来在界面中使用函数 -->
<wxs src="../../pages/calendar/getTime.wxs" module="getTime" />
<view class="container"><view class="content"><!-- 头部星期 --><view class="head"><view class="week" wx:for="{{['日','一','二','三','四','五','六']}}">{{item}}</view></view><!-- 距离顶部的距离 --><view style="margin-top:80rpx"></view><!-- 主体 --><view class="day" wx:for="{{futureArr}}" wx:for-item="item"><!-- 年月 --><view style="flex-shrink: 0;width: 100%; text-align: left;font-weight: 600;padding: 0 20rpx;box-sizing: border-box;justify-content: flex-start;">{{item.newTimer}}</view><!-- 空白部分的个数 --><view wx:for="{{item.newWeek}}" class="old-class"></view><!-- 日期 --><view wx:for="{{item.newMonth}}" wx:for-item="date" class="{{getTime.getTime(item.newTimer + '/' + date) < getTime.getTime(nowTimer)?'oldTimer':''}} {{time[0] <= getTime.getTime(item.newTimer + '/' + date) && getTime.getTime(item.newTimer + '/' + date)<= time[1]?'count':''}}"><view class="{{item.newTimer + '/' + date == nowTimer?'nowTimer':''}} {{time[0] == getTime.getTime(item.newTimer + '/' + date)?'start':''}} {{time[1] == getTime.getTime(item.newTimer + '/' + date)?'end':''}} " data-getTime="{{getTime.getTime(item.newTimer + '/' + date)}}" data-timer="{{item.newTimer + '/' + date}}" bindtap="getTimer"><view>{{date}}</view><view class="one" wx:if="{{item.newTimer + '/' + date == nowTimer && time[0] != getTime.getTime(item.newTimer + '/' + date)}}">今</view><view class="one" wx:if="{{time[0] == getTime.getTime(item.newTimer + '/' + date)?'start':''}}">入住</view><view class="one" wx:if="{{time[1] == getTime.getTime(item.newTimer + '/' + date)?'end':''}}">离开</view></view></view></view></view>
</view>

wxss代码

/* pages/calendar/calendar.wxss */
.container{width: 100%;
}
.content{width: 100%;
}
.head{width: 100%;display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;position: fixed;top: 0;left: 0;
}
.week,.day>view{width: calc(100% / 7);height: 80rpx;box-sizing: border-box;text-align: center;display: flex;flex-direction: row;justify-content: center;align-items: center;font-size: 28rpx;
}
.week{border-bottom: 2rpx solid #999999;background-color: #ffffff;
}
.day{width: 100%;display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;border-bottom: 2rpx solid #999999;
}
.day>.old-class{border: none;
}
.oldTimer{color: #999999;
}
.nowTimer{color: #ffffff;width: 80rpx;height: 80rpx;border-radius: 50%;font-weight: 900;background-color: #2e6ee9;display: flex;flex-direction: column;justify-content: center;
}
.nowTimer>.one{font-size: 24rpx;
}
.start,.end{color: red;background-color: rgb(2, 72, 112);font-weight: 900;width: 100%;height: 100%;border-radius: 15rpx;
}
.count{width: 100%;height: 100%;color: #ffffff;background-color: #6193ee;
}

js代码

// pages/calendar/calendar.js
Page({/*** 页面的初始数据*/data: {futureArr: [], //整理完毕的日历时间nowTimer: '', //现在的时间time: [], //记录入驻离开的时间},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//确定挡圈的年月const that = this;const date = new Date(this.nowDate());const year = date.getFullYear();const month = date.getMonth() + 1;//总计六个月的时间let futureArr = []; //时间的数组let newMonth = month; //新的月份let newYear = year; //新的年份let newWeek = ""; //新的星期let newTimer = ""; //年份-月份let sumDaysArr = {}; //{月份的天数，当月的第一天是周几(0是周日)，当前的年月}for (let i = 0; i < 6; i++) {newWeek = new Date(newYear + '/' + newMonth + '/' + 1).getDay(); //每次循环算出新的年月第一天的所在的星期。页面中用来确定有几个空位newTimer = newYear + '/' + newMonth; //拼接年月。页面中用来显示当前的年月sumDaysArr = {newMonth: that.getDays(newMonth, newYear), //计算出每个月的天数newWeek,newTimer}; //把以上循环中所获取到的数据放在一个对象里面futureArr.push(sumDaysArr); //把所有获取到的时间对象都添加到一个新的数组中newMonth++; //计算下一个月的月份 如果月份大于12那么月份等于1，并且年份增加一年if (newMonth > 12) {newMonth = 1;newYear++;}};this.setData({futureArr: futureArr,nowTimer: new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate(), //获取当前的时间}); //把整理好的数据放在data里面console.log(futureArr)},/*** 获取当前年月* return 当前月份的第一天*/nowDate() {const nowDate = new Date()const nowYear = nowDate.getFullYear()const nowMonth = nowDate.getMonth() + 1return nowYear + '/' + nowMonth + '/' + 1},/*** 判断月份的天数* return 每个月有多少天*/isDays(month, year) {const months = ['1', '3', '5', '7', '8', '10', '12']if (months.indexOf(month + '') != -1) {return 31} else if (month == 2) {if ((year % 400 == 0) || (year % 4 == 0 && year % 100 != 0)) {return 29} else {return 28}} else {return 30}},/*** 获取月份的天数* return 月份天数的数组*/getDays(month, year) {let that = this;let dayArray = [];for (let i = 0; i < that.isDays(month, year); i++) {dayArray.push(i + 1);};return dayArray},/*** 获取点击事件传入的时间用来确定入驻和离开的日期*/getTimer(e) {let time = this.data.timeconst getTime = e.currentTarget.dataset.gettime// 判断所选择的时间是还没有过期的时间if (e.currentTarget.dataset.gettime + 0.1 > new Date(new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate()).getTime()) {if (time.length == 0) {// 判断没有选择过时间，就把选择的时间填入到数组中time.push(getTime)} else if (time.length == 1) {// 判断已经选择过一次时间，第二次所选择的时间大于第一次，那么在数组的后面添加时间，反之，在数组的开始添加时间。如果第二次所选的值与第一次的相等，那么取消第一次所选的时间及删除数组中的值if (time[0] < getTime) {time.push(getTime)} else if (time[0] > getTime) {time.unshift(getTime)} else if (time[0] = getTime) {time.pop()}} else if (time.length == 2) {// 判断已经选择过两次时间，再选着的时间小于开始时间，那么替换掉数组的第一个值，再选择的值大于且不等于数组的第一个值，那个替换掉数组的第二个值。如果等于第数组中某一个值，就将数组中与之相等的值删除。if (time[0] > getTime) {time[0] = getTime} else if (time[0] < getTime && time[1] != getTime) {time[1] = getTime} else if (time[1] == getTime) {time.pop()} else if (getTime == time[0]) {time.shift()}}this.setData({time: time})}},
})

wxs代码，因为要在wxml中使用js方法。大概相当于Vue中的过滤器。

// 用来把时间转换成时间戳
var getTime = function(time) {return  getDate(time).getTime()
}
module.exports = {getTime:getTime
}

今年刚毕业参加工作，微信小程序属于自学。望大佬指正代码的错误，不喜勿喷。当然也在线求职，现在在外包公司，工作半年了，基本都是做微信小程序的开发，老板只让单纯写页面，不让写功能和调接口，想换一个公司，提高自习。

微信小程序日历(酒店入住日期选择)相关推荐

微信小程序实现酒店入住时间区间选择日历
组件版1:https://pan.baidu.com/s/1Iie3Fxgc6RjLQr1pYJk_BQ ( 下载即可用) 下面代码除农历显示不出来(把显示农历的地方删除,有提示!!![<!- ...
适配mpvue平台的的微信小程序日历组件mpvue-calendar
mpvue-calendar 基于vue-calendar的适配mpvue平台的的微信小程序日历组件预览安装 npm i mpvue-calendar 使用 import Calendar fro ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...
基于微信小程序的酒店预定管理系统报告+PPT+项目前后台源码及数据库文件
摘要随着Internet 爆炸式的发展,互联网技术在我们的生活中无处不在,扮演着重要的角色.自我国加入WTO以后,电子商务在国内也迅速的发展了起来,现在互联网上各种电子商务网站更是迅速的增长.网络 ...
微信小程序日历加课表项目
最近花了不少时间做了个微信小程序,期间遇到了挺多技术问题的,写个博客记录一下,我先上小程序使用图片! 1.进入小程序首先要登录才能添加行程和查看行程 2.登录成功后 3.首页日历日期是可点击,点击后是 ...
微信小程序日历签到组件(原创)
微信小程序日历签到组件(原创) 开发原因: 为满足定制需要,市面上又找不到车子和轮子,干脆自己撸了并开源分享有需要的人用其他说明: 该组件js日期均已使用yyyy/MM/dd格式连接解决ios不兼容 ...
微信小程序日历（公历）
微信小程序日历(公历) 周六加班的时候,突然想看看日历是怎么实现的,就试着写了一下. --------------------------分割线-------------------------- J ...
微信小程序，时间戳和日期格式互相转化
微信小程序,时间戳转为日期格式通常后台传递过来的都是时间戳,但是前台展示不能展示时间戳.就需要转化了. 功能说明: 微信小程序里,时间戳转化为日期格式,支持自定义. 拷贝至项目utils/utils ...
微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...

微信小程序日历(酒店入住日期选择)

微信小程序日历(酒店入住日期选择)

微信小程序日历(酒店入住日期选择)相关推荐

最新文章

热门文章