微信小程序时间插件

 参考链接

微信小程序 时间插件 (可以选择日期+星期)_小程序时间插件-CSDN博客

实际示例图：

wxml文件

<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
    <view style="font-size: 16px;height: 100rpx;line-height: 100rpx;padding: 0 20rpx;">预约时间</view>
    <view style="display: flex;width: 100%;">
      <scroll-view class="scroll-view_H approval-scroll">
        <view class='list' style="height: 500rpx;overflow-y: scroll;">
          <view bindtap="selectDate" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" wx:key="index" data-index="{{index}}" data-sdate="{{ item.sdate}}" class='listItem {{(index == dateId)? "current":""}}'>
            <text class='date'>{{ item.date }}</text><text class="huise" wx:if="{{((index == dateId))}}">({{
              item.week }})</text>
          </view>
        </view>
      </scroll-view>
      <view class='time' style="height: 500rpx;overflow-y: scroll;">
        <view bindtap='selectTime' wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="index" data-index="{{ index }}" data-time="{{ timeItem.appointSlot}}" data-status="{{ timeItem.isAppoint}}" class='listItem {{(index == timeId)?"current":((!timeItem.isover&&timeItem.isAppoint)?"noselect":"isFull")}}' wx:key='index'>
          <view>
            <text>{{ timeItem.appointSlot }}</text>
            <text>{{timeItem.isover? "已过期":(!timeItem.isover&&timeItem.isAppoint)?"可预约" : "已约满"}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class='operate'>
      <button class='save' wx:if="{{selectdates && selecttimes}}" bindtap='toAppointment'>确定预约</button>
      <button class='save2' wx:else>确定预约</button>
    </view>
  </action-sheet>

js文件

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    queryKey: "",
    actionSheetHidden: false,
    calendar: [],
    calendar2: [],
    sdate: '',
    selectdates: '',
    selecttimes: '',
    width: 0,
    appointmentId: '', //预约id
    timeArr: [],
    dateMap: {},
    todoLoading: false,
    allheight: '',
    day: '15',
    dateId: 0,
    timeId: -1,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options) {
      
    }
    this.loginIm()
    var that = this;
    wx.getStorage({
      key: "phoneNo",
      success: function (n) {
        that.setData({
          phoneNo: n.data
        })
      }
    })
    //获取日期列表
    let dayList = []
    let base = new Date().getDay()
    for (let i = 0; i < this.data.day; i++) {
      let week = i + base
      week = week > 6 ? week % 7 : week
      dayList.push({
        date: this.getDay(i),
        week: this.week(week),
        sdate: this.getDay2(i),
      });
    }
    this.setData({
      calendar: dayList,
      selectdates:dayList[0].sdate
    })
    this.selectDate(dayList[0],1);
  },
  onRefresh: function () {

  },
  //获取预约时间段
  getTimelist(selectedDate) {
    let that = this;
    var today = new Date();
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = that.doHandleMonth(tMonth + 1);
    tDate = that.doHandleMonth(tDate);
    let now = tYear + "-" + tMonth + "-" + tDate;
    app.http("POST", "/timeList", {
      
    }, (data) => {
      let list = data.data
      for(let i of list){
        if(selectedDate&&selectedDate==now){//当天
          i.isover = that.checkAuditTime(i.Slot)==1? true : false
        }else{
          i.isover = false
        }
      }
      this.setData({
        timeArr: list
      })
    }, (data) => {
      wx.showToast({
        title: data,
        duration: 200,
        icon: "none",
      })
    })
  },
  week(i) {
    var week
    week = " 周" + "日一二三四五六".charAt(i)
    return week
  },
  getDay(day) {
    var today = new Date()
    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
    today.setTime(targetday_milliseconds)
    var tYear = today.getFullYear()
    var tMonth = today.getMonth()
    var tDate = today.getDate()
    tMonth = tMonth + 1
    return tMonth + "月" + tDate + "日"
  },
  getDay2(day) {
    var today = new Date();
    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds);
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = this.doHandleMonth(tMonth + 1);
    tDate = this.doHandleMonth(tDate);
    return tYear + "-" + tMonth + "-" + tDate;
  },
  // 补零
  doHandleMonth(month) {
    var m = month
    if (month.toString().length == 1) {
      m = "0" + month
    }
    return m
  },
  //
  actionSheetTap: function (e) {
    let that = this
    that.setData({
      actionSheetHidden: !that.data.actionSheetHidden,
      lawyerId: e.currentTarget.dataset.lawyerid,
      newuserId: e.currentTarget.dataset.lawyerid,
      selecttimes: '',
      timeId: '-1'
    })
  },
  //  预约弹框Change
  actionSheetbindchange: function () {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    })
  },
  selectDate: function (event,val) {
    let sday = ''
    let sindex = ''
    if(val === 1){//初始默认今天
      sday = event.sdate
      sindex = 0
    }else{
      sday = event.currentTarget.dataset.sdate
      sindex = event.currentTarget.dataset.index
    }
    let that = this
    //为左半部分的点击事件
    that.setData({
      selecttimes: '', //选中日期之后把已选中的时间段清空
      selectdates: sday,
      timeId: '-1',
      dateId: sindex
    })
    that.getTimelist(that.data.selectdates)
  },
  selectTime: function (event) {
    let that = this;
    // 获取当前时间与选中该时间比较
    var date = new Date();
    var year = date.getFullYear(); // 年
    // 月
    var month = that.doHandleMonth(date.getMonth() + 1);
    // 日
    var day = that.doHandleMonth(date.getDate())
    var today = year + "-" + month + "-" + day; //年月日
    var appointSlot = event.currentTarget.dataset.time
    var index = event.currentTarget.dataset.index
    var isAppoint = event.currentTarget.dataset.status
    if ((that.checkAuditTime( appointSlot ) == 1)&&(that.data.selectdates == today) ) {
        //选中日期是今天&&选中时间小于当前
        wx.showToast({
          title: '该时间段已过期，请重新选择',
          icon: "none"
        })
    } else if (isAppoint == true) {
      //为右半部分的点击事件
      this.setData({
        timeId: index,
        selecttimes: appointSlot,
      })
    } else {
      wx.showToast({
        title: '该时间段已约满，请重新选择',
        icon: "none"
      })
    }
  },
  // 比较时间("11:30","20:30");
  checkAuditTime(beginTime) {
    var nowDate = new Date();
    var beginDate = new Date(nowDate);
    var beginIndex = beginTime.lastIndexOf(":");
    var beginHour = beginTime.substring(0, beginIndex);
    var beginMinue = beginTime.substring(beginIndex + 1, beginTime.length);
    beginDate.setHours(beginHour, beginMinue, 0, 0);
    if (nowDate.getTime() - beginDate.getTime() >= 0) {
      return 1; //当前时间大于选中时间
    }
  },
  //确定预约
  toAppointment: function (o) {
    var that = this;
    // //获取当前日期,默认日期
    if (!that.data.selectdates || !that.data.selecttimes) {
      wx.showToast({
        title: '请预约时间',
        icon: "none"
      })
      return false
    }
    let appointmentTime = that.data.selectdates + ' ' + that.data.selecttimes + ':00'
    app.http("POST", "/save", {
      
    }, (function (e) {
      that.setData({
        actionSheetHidden: !that.data.actionSheetHidden,
      })
      if (that.data.isRefreshing) {
        that.setData({
          isRefreshing: false
        })
      }
    }), (function (o) {

    }))
  },
  // 取消预约
  cancelReservation: function (e) {
    let that = this
    wx.showModal({
      title: '提示',
      content: '确定取消该预约？',
      success: function (res) {
        if (res.confirm) { //这里是点击了确定以后
          let id = e.currentTarget.dataset.id
          app.http("POST", "/user/" + id, {
          }, (function (e) {
            wx.showToast({
              title: '已取消',
              icon: "none"
            })
          }), (function (o) {
            wx.showToast({
              title: o,
              icon: "none"
            })
          }))
        } else { //这里是点击了取消以后
          console.log('用户点击取消')
        }
      }
    })
  },
  getNowDateHourTime() {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})