案例-做一个酒店预定小程序用的日期选择案例

今天给大家分享一个酒店预定小程序用的日期选择案例，我是做的支付宝小程序，如果需要应用到微信小程序，请将相关字眼改成微信用的字眼，比如onTap改bindtap，a:if或者a:for改成wx:if和wx:for，JS和CSS大体是一样的，不需要修改，不多说，先上效果图

设计思路：根据年份和月份构建最近6个月的日历，获取每个月的第一天是星期几，空白用空对象填充，每个月需要的格子数 = 每月1号的星期数 + 每月对应的天数。在HTML中遍历日期数据，根据条件判断高亮显示入住时间、离店时间以及两者之间的时间。一下是全部代码(优化在最后).

html代码

    
      
        入住时间{{inTime}}
        离店时间{{outTime}}
      
      
      
        {{item}}
      
      
      
        
          {{idx}}
          
            
              {{item.dateNum}}
            
          
        
      
    

CSS代码

.reserve-time {
  color: #ff4400;
  line-height: 35px;
}
.reserve-time text {
  color: #666;
  margin: 0 10px 0 20px;
}
.page, .date-content {
  width: 100vw;
  background: #f4f4f4;
}
.header{
	font-size: 0;
	padding: 0 24rpx;
  background: #fff;
}
.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;
}
.title {
  line-height: 35px;
}
.days {
  width: 14.28%;
  text-align: center;
  display: inline-block;
  line-height: 35px;
}
.day-select {
  color: #fff;
  background: #ff5128;
}
.not-select {
  color: #999;
}

JS代码，重要部分

Page({
  data: {
    calendar: [],
    // 构建顶部日期时使用
    date: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
    inTime: '',
    outTime: ''
  },
  // 日历初始化
  dataInit (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;
        obj = {
          /*
           * 返回值说明
           * isToday ： 2018-12-27
           * dateNum :  27
          */
          isToday: year + '-' + (month < 10 ? '0' + month : month) + '-' + (num < 10 ? '0' + num : num),
          dateNum: num
        }
      } else {
        // 填补空缺
        // 例如2018-12月第一天是星期6，则需要补6个空格
        obj = {};
      }
      dateArr[i] = obj;
    };
    return dateArr;
  },
  // 点击了日期，选择入住时间或者离店时间
  dayClick (e) {
    var that = this;
    var eTime = e.currentTarget.dataset.day;
    var inTime = that.data.inTime;
    var outTime = that.data.outTime;
    if (inTime == '' || (new Date(eTime) <= new Date(inTime)) || outTime != '') {
      // 如果入住时间为空或选择的时间小于等于入住时间，则选择的时间为入住时间
      inTime = eTime;
      outTime = '';
    } else {
      outTime = eTime;
    };
    that.setData({
      inTime,
      outTime
    })
  },
  onLoad(options) {
    var that = this;
    // 获取本月时间
    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;
    };
    that.setData({
      calendar: timeArray
    });
  },
})

优化部分：

1、选择入住时间时，离店时间的显示问题
本案例中在选择入住时间时，默认的离店时间是清空，如果各位有什么特殊需求，可在dayClick函数中进行修改，比如选择了入住时间，默认选择第二天为离店时间等。视业务需求而定。

2、不允许选择今天之前的日期
1)样式视觉方面：根据条件判断添加类名:

{{item.isToday < toDay ? 'not-select' : ''}}

2)JS逻辑方面，判断如果选中时间小于今天的时间，则直接返回。

 if (eTime < that.data.toDay) { // 该语句放在dayClick函数的所有if判断之前
    return false;
 };

本次案例分享到此全部完成，希望对各位有帮助。