[移动开发]微信小程序日历(酒店入住日期选择)

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

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() + 1
    return 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.time
    const 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
}

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