小程序酒店日历插件

最近在写酒店的项目,需要用到日历插件。代码如下：放在一个组件里面，在页面中直接饮用组件

const formatDate = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return [year, month, day].map(formatNumber).join('-')
}

//calendarComponent.js
Component({
  properties: {
    'show_modal':{
      type:Boolean,
      value:true,
    },
    "circulateMonth":{
      type: Number,
      value: 3,
    }
  },
  observers:{
    'show_modal':function(value){
      if (!value){
       this.setData({
         scrollTop:0,
       })
    }
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { 
      var that = this;
      // 获取本月时间
      var nowTime = new Date();
      var year = nowTime.getFullYear();
      var month = nowTime.getMonth();
      var time = [];
      var timeArray = {};
      let circulateMonth = that.data.circulateMonth
      // 循环6个月的数据
      for (var i = 0; i < circulateMonth; 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;
      };
      that.setData({
        calendar: timeArray,
      });
    },
    hide: function () {

     },
    resize: function () {

     },
  },
  /**
   * 组件的初始数据
   */
  data: {
    calendar: [],
    date: ['日', '一', '二', '三', '四', '五', '六'],
    inTime: formatDate(new Date()),
    outTime: formatDate(new Date((new Date().getTime)() + 24 * 3600 * 1000)),
    toDay: formatDate(new Date()),
    scrollleft:0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 日历初始化
    dataInit(setYear, setMonth) {
      // console.log(setYear, setMonth)
      // 当前时间/传入的时间
      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;
          let isToday = year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num)
          let toDay = this.data.toDay
          let flag = false
          if (new Date(isToday).getTime() < new Date(toDay).getTime()) {
            flag = true
          }
          obj = {
            isToday: isToday,
            dateNum: num,
            disable: flag
          }
        } else {
          // 填补空缺
          // 例如2018-12月第一天是星期6，则需要补6个空格
          obj = {};
        }
        dateArr[i] = obj;
      };

      return dateArr;
    },
    //关闭模特框
    closemodal() {
      let that=this
      let inTime = this.data.inTime
      let outTime = this.data.outTime
      if (inTime && outTime) {
        that.triggerEvent("myevent", {
          inTime: inTime,
          outTime: outTime,
          show_modal: true,
        })
      } else {
        inTime = formatDate(new Date())
        outTime = formatDate(new Date((new Date().getTime)() + 24 * 3600 * 1000))
        that.setData({
          inTime: inTime,
          outTime: outTime,
        })
        that.triggerEvent("myevent", {
          inTime: inTime,
          outTime: outTime,
          show_modal: true,
        })
      }


     
    },
    // 点击了日期，选择入住时间或者离店时间
    dayClick(e) {
      var that = this;
      var eTime = e.currentTarget.dataset.day;
      var inTime = that.data.inTime;
      var outTime = that.data.outTime;
      if (eTime < that.data.toDay) { // 该语句放在dayClick函数的所有if判断之前
        return false;
      };
      if (inTime == '' || (new Date(eTime) <= new Date(inTime)) || outTime != '') {
        // 如果入住时间为空或选择的时间小于等于入住时间，则选择的时间为入住时间
        inTime = eTime;
        outTime = '';
      } else {
        outTime = eTime;
      };
      that.setData({
        inTime,
        outTime
      })
      if (inTime && outTime) {
        that.triggerEvent("myevent",{
          inTime: inTime,
          outTime: outTime,
          show_modal: true,
        })
      }
    },
  }
})

//calendarComponent.css

.modal_zhezhao {
  position: fixed;
  left: 0;
  top: 0rpx;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 1);
  opacity: 0.5;
  z-index: 100;
}

.close_content {
  width: 84rpx;
  height: 136rpx;
  position: absolute;
  top: 0rpx;
  right: 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.close_content  .close {
  width: 48rpx;
  height: 48rpx;
}

.modal_content {
  position: fixed;
  left: 0;
  bottom: 0rpx;
  height: 750rpx;
  width: 100%;
  overflow: hidden;
  z-index: 101;
  background: #fff;
}

.select_day {
  height: 36rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(60, 60, 61, 1);
  line-height: 36rpx;
  padding: 40rpx 0rpx 60rpx 0rpx;
  background: #fff;
  text-align: center;
  width: 100%;
  position: absolute;
}

.header {
  width: 100%;
  padding: 32rpx 0rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 136rpx;
  left: 0rpx;
}

.header>view {
  text-align: center;
  flex: 1;
  height: 28rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(101, 101, 102, 1);
  line-height: 28rpx;
}

.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;
  padding: 6rpx 0px;
}

.date-content {
  padding-top: 228rpx;
  box-sizing: border-box;
  height: 750rpx;
}

.title {
  background: #fff;
  padding: 32rpx 0rpx;
  height: 32rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(60, 60, 61, 1);
  line-height: 32rpx;
  border-bottom: 2rpx solid #f5f5f6;
}

.days {
  width: 14.28%;
  text-align: center;
  display: inline-block;
  line-height: 76rpx;
  height: 76rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(60, 60, 61, 1);
  margin-top: 14rpx;
  position: relative;
}

.day-select {
  opacity: 0.3;
  color: #fff;
}

.date-box {
  margin-bottom: 20rpx;
}

.date-content .day-select:first-child {
  background: rgba(246, 161, 5, 1);
  border-radius: 44rpx;
  color: #fff;
}

.not-select {
  color: #999;
}

.days   .dateNum {
  width: 100%;
  height: 100%;
  position: absolute;
}

.days.day-select  .dateNum {
  width: 76rpx;
  height: 100%;
  background: rgba(246, 161, 5, 1);
  border-radius: 44rpx;
  margin: 0 auto;
  color: #fff;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
}

.days.inTime  .dateNum {
  width: 76rpx;
  height: 100%;
  background: rgba(246, 161, 5, 1);
  border-radius: 44rpx;
  margin: 0 auto;
  color: #fff;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
}

.inTime  .mmm {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0px;
  z-index: 1;
  background: rgba(246, 161, 5, 1);
}

.outTime  .dateNum {
  width: 76rpx;
  height: 100%;
  margin: 0 auto;
  background: rgba(246, 161, 5, 1);
  border-radius: 44rpx;
  color: #fff;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
}

.outTime  .mmm {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0%;
  top: 0px;
  z-index: 1;
  background: rgba(246, 161, 5, 1);
}

//calendarComponet.wxml

<!-- 模态框开始 -->
<view class='modal_zhezhao' hidden='{{show_modal}}'></view>
<view class='modal_content' hidden='{{show_modal}}'>
  <!-- 星期 -->
  <view class='select_day'>
    选择日期
    <view class='close_content'>
      <image src='../../img/home/chahao.png' class='close' bindtap='closemodal'></image>
    </view>

  </view>
  <view class='header'>
    <view wx:for='{{date}}' wx:key="index" class='{{item == "周六" || item == "周日" ? "weekMark" : ""}}'>{{item}}</view>
  </view>
  <!-- 日期 -->
  <scroll-view scroll-y class="date-content"  scroll-top="{{scrollTop}}">
    <view class='date-box' wx:for='{{calendar}}' wx:for-item='calendarItem' wx:for-index='idx' wx:key="idx">
      <view class="title">{{idx}}</view>
      <view class="content">
        <view wx:for='{{calendarItem}}' wx:key="index" class='days {{(item.isToday > inTime && item.isToday < outTime)? "day-select" : ""}}    {{item.disable? "not-select" : ""}}  {{item.isToday == inTime?"inTime":""}}  {{item.isToday == outTime?"outTime":""}} '
          data-id='{{item.dateNum}}' data-day='{{item.isToday}}' data-disable="{{item.disable}}" bindtap="dayClick">
          <view class='dateNum'>{{item.dateNum}}</view>
        </view>
      </view>
      <view class='date-box_empty' style='widht:100%;height:20rpx;'></view>
    </view>
  </scroll-view>
</view>
<!-- 模态框结束 -->

<calendarComponet show_modal="{{show_modal}}" bind:myevent="onMyEvent" circulateMonth="{{circulateMonth}}"></calendarComponet>

const separatedays=(startDay,endDay)=>{
  var startDays = startDay+' 00:00:00'
  var endDays = endDay + ' 00:00:00'
  var temp_startDays = new Date(startDays.replace(/-/g,'/'))
  var temp_endDays = new Date(endDays.replace(/-/g, '/'))
  let temp_start = temp_startDays.getTime()
  let temp_end = temp_endDays.getTime()
  var dats = parseInt((temp_end - temp_start)/(1000*60*60*24))
  return dats
}
  Page({
  data:{

    inTime: formatDate(new Date()),
    outTime: formatDate(new Date((new Date().getTime)() + 24 * 3600 * 1000)),
    stopDays: '',//入住几晚
     circulateMonth: 6,
},

 onMyEvent(event){
      if (event.detail && event.detail.inTime && event.detail.outTime) {
  
        let inTime = event.detail.inTime
        let outTime = event.detail.outTime
        
        let stopDays = separatedays(inTime, outTime)
        let show_modal = event.detail.show_modal
        

      }
    },
})