小程序酒店日历

之前做了个时间日历比较简单的把，如果要加价格什么的也可以稍微看着加加，之前写过这样的一个博客，只不过那个照片太丑然后又有点变化，就重新写过了。如图那个时间点是入口。

这个呢是未选中的样子。

这个是选了连续的样式，

这个是选了好多个时间的样式。其实还有些中间不可选的样式，只不过是调接口获取的，不过接口已经挂了所以就没办法显示出来了，大概就是有些已经满课的然后选的时间范围内有满课的就提示这个时间段不能选，接下来就是展示代码的时刻了。

首先还是看view

<view class="page">
  <view class="reserve-time"> 
    <view class="view_time">
      <view style="display: flex; flex-direction: column; margin-left: 45rpx;">
        <view class="time_text">入住时间</view>
        <view class="time_chose">{{inTime_m_d}}</view>
      </view>
      <view class="sum_days">{{sum_day}}</view>
      <view class="out_time">
        <view class="time_text">离店时间</view>
        <view class="time_chose">{{outTime_m_d}}</view>
      </view>
    </view>
    <!-- 星期 -->
    <!-- <view class="line"></view> -->
    <view style="display: flex; flex-direction: column;">
    <view class="line"></view>
<view >
    <view class='header'>
      <view wx:for='{{date}}' wx:key='index'>{{item}}</view>
    </view>

    </view>
<view class="line"></view>
</view>

  </view>
  <!-- 日期 -->
  <view class="date-content">

    <view class='date-box' wx:for='{{calendar}}' wx:key='index' wx:for-item='calendarItem' wx:for-index='idx'>
      <view class="title">{{idx}}</view>
      <view class="content">
        <view wx:for='{{calendarItem}}' wx:key='index' class='days {{(item.today > inTime && item.today < outTime) ? "day-select" :item.today == inTime?outTime===""?"day-start-first-select":"day-start-select":item.today == outTime ?"day-end-select":"not-select"}}'
          id='{{index}}' data-title='{{idx}}' data-canclick='{{item.canclick}}' data-id='{{item.dateNum}}' data-day='{{item.today}}' bindtap="dayClick">
          <view class="show_center">
            <!-- <view class="price">{{text_out}}</view> -->
            <view class="{{item.canclick!=0?item.canclick==1?'wufang':'':'unclick'}}">{{item.dateNum}}</view>
            <view class="price">{{''===item.text_out?item.price:item.text_out}}</view>
            <view class="wufang">{{''===item.text_out?''===item.wufang?item.wufang:item.wufang:''}}</view>

          </view>
        </view>
      </view>
    </view>
  </view>

<view class="bottm_view">
<view class="clear_text" bindtap="clear_time">清空日期</view>

<view class="ok_text" bindtap="ok_click">确定</view>

</view>

</view>

然后就是css

.reserve-time {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0rpx;
  background: white;
}

.view_time {
  display: flex;
  height: 200rpx;
  flex-direction: row;
}

.sum_days {
  font-size: 24rpx;
  color: #333;
  margin-top: 89rpx;
  margin-left: 135rpx;
}

/* 入住时间 */

.time_text {
  font-size: 24rpx;
  margin-top: 62rpx;
  color: #333;
  height: 35rpx;
}

.time_chose {
  font-size: 36rpx;
  color: #4fbdb0;
  margin-top: 12rpx;
}

.out_time {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 45rpx;
  align-items: flex-end;
}

.reserve-time text {
  color: #666;
  margin: 0 10px 0 20px;
}

.page, .date-content {
  width: 100%;
  background: white;
}

.header {
  font-size: 0;
  padding: 0 24rpx;
  background: #fff;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.line {
  width: 100%;
  background: #d6d6d6;
  height: 1px;
  background-color: #e3e5e9;
  -webkit-transform: scale(1, 0.7);
  transform: scale(1, 0.7);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.header>view {
  display: inline-block;
  width: 14.285%;
  color: #333;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}

.yearMonth {
  font-size: 14px;
  line-height: 35px;
  color: #333;
  padding-left: 10px;
  box-sizing: border-box;
}

.header .weekMark {
  color: #ff3930;
}

.content {
  width: 100%;
  background: #fff;
}

.date-content {
  padding: 0 1%;
  box-sizing: border-box;
  margin-top: 339rpx;
margin-bottom: 50rpx;
}

.title {
  display: flex;
  justify-content: flex-start;
  line-height: 35px;
  padding-bottom: 10rpx;
  padding-top: 10rpx;
  font-size: 36rpx;
  margin-left: 47rpx;
}

.days {
  display: inline-block;
  width: 14.28%;
  height: 108rpx;
  /* margin-bottom: 10rpx; */
  vertical-align: middle;
  overflow: auto;
  margin-top: 20rpx;
}

.day-select {
  color: #fff;
  background: #83d1c8;
  box-sizing: border-box;
  font-size: 28rpx;
}

.day-start-select {
  color: #fff;
  background: #4fbdb0;
  border-radius: 10rpx 0rpx 0rpx 10rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

/* 第一次选择日期 */

.day-start-first-select {
  color: #fff;
  background: #4fbdb0;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.day-end-select {
  color: #fff;
  background: #4fbdb0;
  border-radius: 0rpx 10rpx 10rpx 0rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.not-select {
  color: #333;
  font-size: 28rpx;
}

.price {
  font-size: 20rpx;
}

.unclick {
  color: gainsboro;
  text-decoration: line-through;
}

.wufang {
  color: gainsboro;
  font-size: 28rpx;
}

.show_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 108rpx;
  justify-content: center;
}

.bottm_view {
  display: flex;
  flex-direction: row;
  height: 120rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px -6px 10px 0px rgba(0, 0, 0, 0.05);
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  align-items: center;
  justify-content: start;
}
.clear_text{
  color: #333;
  font-size: 28rpx;
  margin-left: 45rpx;
}
.ok_text{
  display: flex;
  position: absolute;
  right: 20rpx;
  width: 240rpx;
  height: 90rpx;
  border-radius: 45rpx;
  background: #4FBDB0;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}

再然后就是js

var utils = require('../../../../pages/utils/util.js')

Page({
  data: {
    calendar: [],
    // 构建顶部日期时使用
    date: ['日', '一', '二', '三', '四', '五', '六'],
    inTime: '', //入住时间
    outTime: '', //离开时间
    inTime_m_d: '', //入住时间
    outTime_m_d: '', //离开时间
    text_in: '入住',
    text_out: '',
    old_id: -1,
    old_title: '',
    sum_day: '',
    from_page:-1

  },

  // 日历初始化
  dataInit: function(setYear, setMonth) {
    var that = this;
    var now_today = utils.time();
    // 当前时间/传入的时间
    var now = setYear ? new Date(setYear, setMonth) : new Date();
    var year = setYear || now.getFullYear();
    // 传入的月份已经加1
    var month = setMonth || now.getMonth() + 1;
    // 构建某日数据时使用
    var obj = {};
    // 需要遍历的日历数组数据
    var dateArr = [];
    // 需要的格子数，为当前星期数+当月天数
    var arrLen = 0;
    // 该月加1的数值，如果大于11，则为下年，月份重置为1 
    // 目标月1号对应的星期
    var startWeek = new Date(year + '-' + (month < 10 ? '0' + month : month) + '-01').getDay();
    //获取目标月有多少天
    var dayNums = new Date(year, month < 10 ? '0' + month : month, 0).getDate();
    var num = 0;
    // 计算当月需要的格子数 = 当前星期数+当月天数
    arrLen = startWeek * 1 + dayNums * 1;
    for (var i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        var month_day = year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num);
        obj = {
          /*
           * 返回值说明
           * today ： 2018-12-27 当前时间
           * dateNum :  27
           */
          today: year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num),
          dateNum: now_today === month_day ? '今天' : num,
          price: '', //(new Date(now_today) <= new Date(month_day)) ? num % 3 == 0 ? '' : '￥234':'',
          canclick: (new Date(now_today) <= new Date(month_day)) ? 2 : 0, //0表示今天之前的日期1表示无房2表示有房可点
          text_out: that.data.outTime === month_day ? '离开' : '',
          wufang: '' //num % 3 == 0 ? (new Date(now_today) <= new Date(month_day))?'无房':'':''
        }
      } else {
        // 填补空缺
        // 例如2018-12月第一天是星期6，则需要补6个空格
        obj = {};
      }
      dateArr[i] = obj;

    };
    return dateArr;
  },
  // 点击了日期，选择入住时间或者离店时间
  dayClick(e) {
    var that = this;
    var eTime = e.currentTarget.dataset.day;
    var canclick = e.currentTarget.dataset.canclick;
    var id = e.currentTarget.id;
    var title = e.currentTarget.dataset.title;


    var inTime = that.data.inTime;
    var outTime = that.data.outTime;


    if (canclick == 0 || canclick == null)
      return;
    if (inTime == '' || (new Date(eTime) <= new Date(inTime)) || outTime != '') {
      if (canclick == 1)
        return;
      // 如果入住时间为空或选择的时间小于等于入住时间，则选择的时间为入住时间
      inTime = eTime;
      outTime = '';
      that.setData({
        sum_day: '共0晚'
      })
      if (that.data.old_id == -1) {} else {
        that.data.calendar[that.data.old_title][that.data.old_id]['text_out'] = '';
      }

    } else {
      outTime = eTime;
      // console.log(id);
      var istrue = that.juge_same_date(that.getAll(inTime, outTime), that.out_canclick());
      if (istrue) {
        wx: wx.showToast({
          title: '中间有无房不可选',
          icon: 'none',
        })
      }
      if (istrue)
        return;
      let sum = that.getAll(inTime, outTime).length - 1;
      that.data.sum_day = '共' + sum + '晚';
      that.data.calendar[title][id]['text_out'] = '离开';
      that.data.old_id = id;
      that.data.old_title = title;
    }
    this.data.inTime_m_d = that.ths_month_day(inTime);
    this.data.outTime_m_d = that.ths_month_day(outTime);


    that.setData({
      inTime,
      outTime,
      old_id: that.data.old_id,
      text_out: that.data.text_out,
      calendar: that.data.calendar,
      inTime_m_d: that.data.inTime_m_d,
      outTime_m_d: that.data.outTime_m_d,
      sum_day: that.data.sum_day
    })
  },

  // 获取所有包含无房的时间
  out_canclick: function() {
    var that = this;
    var arry_year = [];
    for (var key in that.data.calendar) {
      // console.log(key);
      var arry = that.data.calendar[key];
      var size = arry.length;
      for (var i = 0; i < size; i++) {
        if (arry[i]['canclick'] == 1) {
          arry_year.push(arry[i]['today']);
        }
      }
    }
    // console.log(arry_year);

    return arry_year;
  },
  getTimes: function(nS) {
    var date = new Date(parseInt(nS));
    var year = date.getFullYear();
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var hours = date.getHours();
    var minu = date.getMinutes();
    var sec = date.getSeconds();

    return year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day);
  },
  //获取点击范围内的时间段
  getAll: function(begin, end) {
    var vm = this;
    // 开始日期和结束日期
    if (!begin || !end) { // 去除空的可能性
      wx.showToast({
        title: '选择的时间不能为空哦~',
        icon: 'none'
      })
      return false;
    }
    // 在时间Date的原型中定义一个format方法
    Date.prototype.format = function() {
      var s = ""; // 定义一个字符串，目的，要时间格式按照我们的要求拼接
      var month = vm.getMonth() + 1;
      var day = vm.getDate();
      s += vm.getFullYear() + "-";
      s += '0' + month + "-";
      s += day;
      return s; // 得到的格式如 "2018-11-20" 
    }
    var ab = begin.split('-'); // 把日期参数分割，注意，如果以'/'连接，则分割'/'
    var ae = end.split('-');
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]); // 返回符合UTC的时间格式
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    // console.log(unixDb);
    var arr = [];
    for (var k = unixDb; k <= unixDe;) {
      arr.push(vm.getTimes(parseInt(k)));
      k = k + 24 * 60 * 60 * 1000;
    }
    return arr; // 返回两个日期之间的所有日期数组。
  },

  //判断两个时间里面有没有相同的时间
  juge_same_date: function(arry1, arry2) {
    var size_chouse = arry1.length;
    var size_wufang = arry2.length;
    // console.log(arry1);
    // console.log(arry2);
    var have = -2;
    var ishave = false;
    for (var i = 0; i < size_wufang; i++) {
      for (var j = 0; j < size_chouse - 1; j++) {
        if (arry2[i] === arry1[j]) {
          have = 1;
          break;
        }
      }
      if (have == 1)
        break;
    }
    if (have == 1) {
      ishave = true;
    }
    return ishave;

  },
  ths_month_day: function(e) {
    var arry = e.split('-');
    if (arry.length == 3) {
      // console.log('dddd')
      return arry[1] + "月" + arry[2] + "日";
    } else
      return "";
  },
  onLoad: function(options) {
    var that = this;
    that.data.from_page = options.from_page;
    that.data.inTime = options.inTime;
    that.data.outTime = options.outTime;
    let sum = that.getAll(that.data.inTime, that.data.outTime).length - 1;
    that.data.sum_day = '共' + sum + '晚';
    this.data.inTime_m_d = that.ths_month_day(that.data.inTime);
    this.data.outTime_m_d = that.ths_month_day(that.data.outTime);
    that.setData({
      inTime: options.inTime,
      outTime: options.outTime,
      sum_day: that.data.sum_day,
      inTime_m_d: that.data.inTime_m_d,
      outTime_m_d: that.data.outTime_m_d,
      from_page: that.data.from_page
    });
    // 获取本月时间
    var nowTime = new Date();
    var year = nowTime.getFullYear();
    var month = nowTime.getMonth();
    var time = [];
    var timeArray = {};
    // 循环6个月的数据
    for (var i = 0; i < 6; i++) {
      year = month + 1 > 12 ? year + 1 : year;
      month = month + 1 > 12 ? 1 : month + 1;
      // 每个月的数据
      time = that.dataInit(year, month);
      // 接收数据
      timeArray[year + '年' + (month < 10 ? '0' + month : month) + '月'] = time;
    };
    if (that.data.old_id == -1) {

      
      for (var key in timeArray){
        var bf= 0;
        // console.log(key)
       var size = timeArray[key];
        for (var i = 0; i < size.length;i++){
          if (that.data.outTime === timeArray[key][i]['today']){
            that.data.old_id = i;
            that.data.old_title = key;
            bf = -1;
            break;
          }
        }
        if(bf==-1)
        break;
      }

    }
    that.setData({
      calendar: timeArray
    });

  },





  // 清除日期
  clear_time() {
    let that = this;
    if (that.data.old_id!=-1){
    that.data.calendar[that.data.old_title][that.data.old_id]['text_out'] = '';
  }
    that.setData({
      inTime: '',
      outTime: '',
      inTime_m_d: '', //入住时间
      outTime_m_d: '',
      sum_day: '',
      calendar: that.data.calendar
    });
  },
  ok_click:function(){
    let that = this;
    let pages = getCurrentPages();  // 当前页的数据，可以输出来看看有什么东西
    let prevPage = pages[pages.length - 2];  // 上一页的数据，也可以输出来看看有什么东西
    // console.log(pages)
    // console.log(prevPage)

    /** 设置数据 这里面的 value 是上一页你想被携带过去的数据，后面是本方法里你得到的数据，我这里是detail.value，根据自己实际情况设置 */
    prevPage.setData({
      inTime: that.data.inTime,
      outTime: that.data.outTime,
      prevPage:1,
      sum_day: that.data.sum_day
    })
    wx.navigateBack({
      delta: 1
    })
  }
})

最后工具类也放一下吧

utis

function time() {
  var timestamp = Date.parse(new Date());
  var date = new Date(timestamp);
  //获取年份  
  var year = date.getFullYear();
  //获取月份  
  var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
  //获取当日日期 
  var num = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
  return year + '-' + month + '-' + num;
}
//todate默认参数是当前日期，可以传入对应时间 todate格式为2018-10-05
function getDates(days, todate) {
  var dateArry = [];
  for (var i = 0; i < days; i++) {
    var dateObj = dateLater(todate, i);
    dateArry.push(dateObj)
  }
  return dateArry;
}

function dateLater(dates, later) {
  let dateObj = {};
  let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  let yearDate = date.getFullYear();
  let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
  let dayFormate = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.time = yearDate + '-' + month + '-' + dayFormate;
  dateObj.week = show_day[day];
  return dateObj;
}
/**
 * @num_day_later 想获取传入时间几天后的数据，传0就是返回当天的数据返回的数据为{"time":"12月01号","week":"周日"}
 */
function getDayAndWeek(num_day_later, todate) {
  var dateObj = getArray(todate, num_day_later);
  return dateObj;
}

function getArray(dates, later) {
  let dateObj = {};
  let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');
  let date = new Date(dates);
  date.setDate(date.getDate() + later);
  let day = date.getDay();
  let yearDate = date.getFullYear();
  let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
  let dayFormate = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
  dateObj.time = month + '.' + dayFormate;
  dateObj.date = yearDate + '-' + month + '-' + dayFormate;
  dateObj.week = show_day[day];
  return dateObj;
}

//获取传入时间的月和日格式为12月03号，入参格式为2012-01-01
function ths_month_day(e) {
  var arry = e.split('-');
  if (arry.length == 3) {
    return arry[1] + "月" + arry[2] + "日";
  } else
    return "";
}
//转换成指定格式
function format(time, format) {
  var t = new Date(time);
  var tf = function(i) {
    return (i < 10 ? '0' : '') + i
  };
  return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
    switch (a) {
      case 'yyyy':
        return tf(t.getFullYear());
        break;
      case 'MM':
        return tf(t.getMonth() + 1);
        break;
      case 'mm':
        return tf(t.getMinutes());
        break;
      case 'dd':
        return tf(t.getDate());
        break;
      case 'HH':
        return tf(t.getHours());
        break;
      case 'ss':
        return tf(t.getSeconds());
        break;
    }
  })
}
module.exports = {
  // formatTime: formatTime,
  time: time,
  ths_month_day: ths_month_day,
  getDates: getDates,
  dateLater: dateLater,
  getDayAndWeek: getDayAndWeek,
  format: format


}

到此就结束了，做的时候觉得很难，其实还是很简单的。顺便放个微信号？