微信小程序日历(酒店入住日期选择)
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.jsPage({/*** 页面的初始数据*/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}
今年刚毕业参加工作，微信小程序属于自学。望大佬指正代码的错误，不喜勿喷。当然也在线求职，现在在外包公司，工作半年了，基本都是做微信小程序的开发，老板只让单纯写页面，不让写功能和调接口，想换一个公司，提高自习。
