微信小程序预约时间封装组件

common.js //函数封装

function weekDate() { //获取周数据
  var myDate = new Date(); // hehe
  myDate.toLocaleDateString();
  var month = myDate.getMonth() + 1;
  var time = myDate.getFullYear() + '年' + month + '月' + myDate.getDate() + '日';
  var total = 1; // 个数
  var dayList = [];
  dayList.push({
    'day': myDate.getDate(),
    'month': myDate.getMonth() + total,
    'week': toWeekDay(myDate.getDay()),
    'year': myDate.getFullYear()
  });
  for (var i = 0; i < 10; i++) {
    myDate.setDate(myDate.getDate() + total); // number 是最近几天  则会自动计算
    // 需求  月份-日   星期几      
    dayList.push({
      'day': myDate.getDate(),
      'month': myDate.getMonth() + total,
      'week': toWeekDay(myDate.getDay()),
      'year': myDate.getFullYear()
    })
  }
  // return dayList;
  let length = dayList.length
  let arrOne = dayList[0]
  let arrLast = dayList[length - 1]
  let StartDate = arrOne.year.toString() + '-' + arrOne.month + '-' + arrOne.day
  let EndDate = arrLast.year.toString() + '-' + arrLast.month + '-' + arrLast.day
  return {
    dayList,
    StartDate,
    EndDate
  }
}

function toWeekDay(weekDay) { // 传入数据  讲一周的某一天返回成中文状态下的字符
  switch (weekDay) {
    case 1:
      return '一';
      break;
    case 2:
      return '二';
      break;
    case 3:
      return '三';
      break;
    case 4:
      return '四';
      break;
    case 5:
      return '五';
      break;
    case 6:
      return '六';
      break;
    case 0:
      return '日';
      break;
    default:
      break;
  }
  return '传入未知参数';
}
module.exports = {
  weekDate: weekDate
}

js:

const common = require('../../utils/common.js')直接引入
Page({
  data: {
    current: 0,
    NowDay: new Date().getDate(),
    dayList: []
  },
  onLoad: function(options) {
    console.log(common.weekDate().dayList)
    this.setData({
      dayList: common.weekDate().dayList
    })
  },
  changeTab(e) { //切换日期
    let edata = e.currentTarget.dataset
    let current = edata.current
    this.setData({
      current: current,
      pipeiDate: edata.year + '-' + edata.month + '-' + edata.day
    })
    //转化为标准时间
    let pdate = new Date(this.data.pipeiDate)
    //格式化时间
    pdate = common.getNowFormatDate(pdate)//自己封装格式化时间函数
    console.log(pdate)
  }
})

wxml:

 <view class="">   <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">   <view wx:for="{{dayList}}" wx:for-index="index" class=" scroll-view-item_H tab-item {{current==index ?'active':'noactive'}}" wx:key="index" bindtap='changeTab' data-year='{{item.year}}' data-month='{{item.month}}' data-day='{{item.day}}' data-current="{{index}}">
      <view class="TimeOrderBox scroll-view-item bc_red {{id == index ? 'coloBack':''}}" id="{{index}}" data-selectTime="{{item.month}}/{{item.day}}" data-week="{{item.week}}">
        <view class="TimesWD">
          <text class="TimeOrderText" wx:if="{{NowDay==item.day}}">今天</text>
          <text class="TimeOrderText" wx:else>周{{item.week}}</text>
          <view class="TimeOrderDay">
            <text class="TimeOrderTextDay">{{item.month}}-{{item.day}}</text>
          </view>
        </view>
      </view>
    </view>   </scroll-view> </view>

wxss:

.page-section-spacing {
  margin-top: 60rpx;
}

.scroll-view_H {
  white-space: nowrap;
  background-color: #2e323b;
}

.scroll-view-item_H {
  display: inline-block;
  color: #fff;
  padding: 20rpx;
  margin: 0 10rpx;
  text-align: center;
}

.TimesWD {
  width: 90rpx;
  text-align: center;
}

.TimeOrderText {
  color: #787b81;
  font-weight: 400;
}

.active  .TimeOrderText {
  font-weight: bold;
  color: #fff;
}

.active .TimeOrderDay {
  width: 90rpx;
  background-color: #00afd2;
  border-radius: 40%;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.TimeOrderTextDay {
  display: block;
  margin-top: 15rpx;
}

.active .TimeOrderTextDay {
  color: #fff;
}

.active .TimeOrderText {
  color: rgba(255, 255, 255, 1);
}

.noactive .TimeOrderTextDay {
  opacity: 0.5;
}

效果和目录结构