示例简介

本文介绍项目中常用到的两种日期格式：

1、滚动选择器选择日期格式（文中显示7天非周末日期）；

2、卡片选择日期格式；

实现过程

一、滚动选择器选择日期格式

1、文件*.wxml和*.wxss代码如下：

  预约日期
  
    
      {{dateArry[index]}}
    
  

.time-box {
  padding: 32rpx 30rpx;
  display: flex;
  background-color: #fff;
}


.time-box .time-title {
  color: #9A9A9A;
  margin-right: 73rpx;
  width: 150rpx;
}


.time-box picker {
  width: 480rpx;
}

2、文件*.js存放所有功能的逻辑代码，代码实现如下：

1）滚动选择器选用组件picker的普通选择器，为了滚动选择数据，重点就是计算获取range的数据；

2）函数dateLater用于获取修改日期（date.setDate(date.getDate() + later)）后的年月日和星期几的信息（dateString）；

3）函数getDates用于根据传入的数字（days）来获取所有的dateString数据，并添加到dateArry，用于picker的range数据。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    index: 0,
    dateArry: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDates(7);
  },
  // 选择预约日期
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  //获取d当前时间多少天后的日期和对应星期
  getDates: function (days) {
    let dateArry = [];
    for (let i = 0; i < days; i++) {
      let dateObj = this.dateLater(i);
      if (dateObj) { // 非周六日才添加
        dateArry.push(dateObj)
      }
    }
    this.setData({
      dateArry
    });
  },
  /**
   * 传入时间后几天
   * param：传入时间：later:往后多少天
   */
  dateLater: function (later) {
    let dateString = '';
    let show_day = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
    let date = new Date();
    date.setDate(date.getDate() + later); // setData实现日期的相加减
    let day = date.getDay(); // 获取星期的数字
    if (day == 0 || day == 6) { // 用于去掉周六周日
      return false;
    }
    let year = date.getFullYear();
    // 给月日补0
    let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : date.getMonth() + 1);
    let dayNumber = (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());


    let week = show_day[day];
    dateString = `${year}-${month}-${dayNumber}  ${week}`;
    return dateString;
  }
})

二、卡片选择日期格式

1、文件*.wxml和*.wxss代码如下：

为了实现选中效果，利用了radio的选择事件；所以为了能点击到radio且看不见，需要修改radio的样式在最上层且遮盖卡片并透明显示。

  
    
    
      {{item.time}}
      {{item.number == 0 ? '已约满' : '可预约'+item.number+'人'}}
    
  

/* 预约时间段 */
.item {
  height: 104rpx;
  text-align: center;
  border: 2rpx solid #EBEBEB;
  border-radius: 8rpx;
  background-color: #fff;
  font-size: 26rpx;
  padding-top: 24rpx;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.item .time {
  color: #343434;
  margin-bottom: 8rpx;
}
.item .number {
  color: #3E7AF5;
}
.radio.active .item {
  background-color: #3E7AF5;
}
.radio.active .item .time {
  color: #fff;
}
.radio.active .item .number {
  color: #fff;
}
.item.disabled .time {
  color: #ADADAD;
}
.item.disabled .number {
  color: #FA7014;
}
/* radio样式 */
.radio-group {
  padding: 0 30rpx;
}
.radio-group .radio {
  position: relative;
  display: inline-block;
  margin: 30rpx 30rpx 0 0;
  width: 210rpx;
  height: 128rpx;
}
.radio-group .radio:nth-child(3n) {
  margin-right: 0;
}
.radio-group radio .wx-radio-input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
  border: 2rpx solid #f2f2f2;
  z-index: 1;
  opacity: 0;
}

2、文件*.js存放所有功能的逻辑代码，代码实现如下：

函数radioChangeTag用于判断点击id跟数组那个数据id一样，一样则选中，反之则不选中。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    timeLabels: [{
      id: 1,
      time: '09:00-09:30',
      number: 15,
      checked: true
    }, {
      id: 2,
      time: '09:30-10:00',
      number: 12,
      checked: false
    }, {
      id: 3,
      time: '10:00-10:30',
      number: 0,
      checked: false
    },{
      id: 4,
      time: '10:30-11:00',
      number: 5,
      checked: false
    }, {
      id: 5,
      time: '11:00-11:30',
      number: 2,
      checked: false
    }, {
      id: 6,
      time: '11:30-12:00',
      number: 1,
      checked: false
    },{
      id: 7,
      time: '14:30-15:00',
      number: 5,
      checked: false
    }, {
      id: 8,
      time: '15:00-15:30',
      number: 8,
      checked: false
    }, {
      id: 9,
      time: '15:30-16:00',
      number: 1,
      checked: false
    }]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  // 选择时间段（单选）
  radioChangeTag: function (e) {
    let timeLabels = this.data.timeLabels;
    let id = e.currentTarget.dataset.id;
    timeLabels.map((item, index) => {
      if (item.id == id) {
        timeLabels[index].checked = true;
      } else {
        timeLabels[index].checked = false;
      }
    });
    this.setData({
      timeLabels
    })
  }
})