微信小程序周日历制作

在小程序开发中，经常会遇到特殊日历的制作，下面开源一个在日常项目用到的日历demo.代码可直接复制，即可看到如下效果：

一、效果

二、代码部分

clener.js文件内容

// pages/services/servicesdetail/serdetails.ts

Page({



  /**

   * 页面的初始数据

   */

  data: {

    titleData: "",

    services_tags: "服务介绍",

    diseaseList: [

      { diseaseCode: "0", diseaseName: "08:00~10:00", checked: false },

      { diseaseCode: "1", diseaseName: "10:00~12:00", checked: false },

      { diseaseCode: "2", diseaseName: "14:00~15:30", checked: false },

      { diseaseCode: "3", diseaseName: "15:30~17:00", checked: false },

    ],

    thisDate: 2, //日期选中

    nowDate: '',

    temp: '',

    oneData: "#06c6ad",//日期隐藏显示标记

    twoData: "#f0f0f0",

    threeData: "#f0f0f0",

    fourData: "#f0f0f0",

    fiveData: "#f0f0f0",

    sixData: "#f0f0f0",

    sevenData: "#f0f0f0",

    firstValue: "",//月份

    twoValue: "",//月份

  },



  /**

   * 时间选择切换 

   */

  diseaseSwitch: function (options) {



    let that = this;

    // 按钮索引

    var index = options.currentTarget.dataset.index;

    // 索引对应内容

    var item = that.data.diseaseList[index];



    for (var y in that.data.diseaseList) {

      that.data.diseaseList[y].checked = false;

    }



    // 数据处理

    let timeDate = new Date();

    let d = timeDate.getDate();



    let h = timeDate.getHours();

    // let h=15;

    let m = timeDate.getMinutes();



    let timestampTwo = new Date(''+that.data.nowDate).getTime();//选中日期字符串转时间戳

    let timeStamp = Date.parse(new Date()+"");//当前时间



    if (timestampTwo-timeStamp> 0) {

      // 选中，未选中状态切换

      item.checked = !item.checked;

    } else {

      if (h < 10) {

        // 选中，未选中状态切换

        item.checked = !item.checked;



      } else if (h >= 10 && h < 12) {

        // 选中，未选中状态切换

        if (index == 0) {

          wx.showToast({

            title: '无效时间段',

            icon: 'error',

            duration: 2000

          })

          return 0;

        } else {

          item.checked = !item.checked;

        }



      } else if (h < 15 || (16 > h && h >= 15 && m < 30)) {

        if (index == 0 || index == 1) {

          wx.showToast({

            title: '无效时间段',

            icon: 'error',

            duration: 2000

          })

          return 0;

        } else {

          item.checked = !item.checked;

        }



      } else if (h < 17) {

        if (index == 0 || index == 1 || index == 2) {

          wx.showToast({

            title: '无效时间段',

            icon: 'error',

            duration: 2000

          })

          return 0;

        } else {

          item.checked = !item.checked;

        }



      } else {



        wx.showToast({

          title: '无效时间段',

          icon: 'error',

          duration: 2000

        })



        return 0;

      }

    }



    that.setData({

      diseaseList: that.data.diseaseList

    })



  },



  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {



    let that = this;



    // s时间段数据处理

    let timeDate = new Date();

    let h = timeDate.getHours();

    let m = timeDate.getMinutes();



    if (h < 10) {

      that.data.diseaseList[0].checked = true;

    } else if (h >= 10 && h < 12) {

      that.data.diseaseList[1].checked = true;

    } else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {

      that.data.diseaseList[2].checked = true;

    } else if ((17 > h && h >= 15 && m >= 30) && h < 17) {

      that.data.diseaseList[3].checked = true;

    }

    that.setData({

      diseaseList: that.data.diseaseList

    })

    // 时间段处理




    this.getWeekDay();



    const tmp = this.data.temp;

    this.setData({

      nowDate: tmp

    });



  },



  /*

   * 日期选择监听 

   */

  dateClick: function (options) {



    let _this = this;

    let dateId = options.currentTarget.dataset.id;

    let times = options.currentTarget.dataset.time;



    let date = new Date();



    if (dateId > date.getDate()) {

      for (var y in _this.data.diseaseList) {

        _this.data.diseaseList[y].checked = false;

      }

      // s时间段数据处理

      _this.data.diseaseList[0].checked = true;



      _this.setData({

        thisDate: dateId,

        nowDate: times,

        diseaseList: _this.data.diseaseList

      });

    } else {

      // s时间段数据处理

      let timeDate = new Date();

      let h = timeDate.getHours();

      let m = timeDate.getMinutes();

      for (var y in _this.data.diseaseList) {

        _this.data.diseaseList[y].checked = false;

      }



      if (h < 10) {

        _this.data.diseaseList[0].checked = true;

      } else if (h >= 10 && h < 12) {

        _this.data.diseaseList[1].checked = true;

      } else if (h >= 12 && h < 15 || (16 > h && h >= 15 && m < 30)) {

        _this.data.diseaseList[2].checked = true;

      } else if ((17 > h && h >= 15 && m >= 30) && h < 17) {

        _this.data.diseaseList[3].checked = true;

      }



      _this.setData({

        thisDate: dateId,

        nowDate: times,

        diseaseList: _this.data.diseaseList

      });

      // 时间段处理

    }

    var timestamp = new Date(''+times).getTime();//日期字符串转时间戳

    console.log("=====okkookojjo===" + times+"==时间戳=="+timestamp);



  },



  

  // 月份处理

  paddingZero: function (n) {

    if (n < 10) {

      return '0' + n;

    } else {

      return n;

    }

  },



  /**

   * 获取明日开始一周日期

   */

  getWeekDay: function () {

    let that = this;

    let myDate = new Date();



    let year = myDate.getFullYear();

    let month = myDate.getMonth() + 1;

    let dates = myDate.getDate();

    let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

    myDate.setDate(myDate.getDate()-5);//调试时间也可使用例如+1天或者+10几天

    let dateTemp;

    let timeArr = [];

    let times;



    var currentNum = 0;//数字Number标记月份切换

    var lastNum = 0;//数字Number标记月份切换



    for (let i = 0; i < 7; i++) {//月份标记处理

      times = year + '-' + that.paddingZero((myDate.getMonth() + 1)) + "-" + that.paddingZero(myDate.getDate());

      dateTemp = myDate.getDate();



      currentNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));

      if (i == 0) {

        that.firstValue = times.substring(times.indexOf("-") + 1, times.lastIndexOf("-"));

        that.setData({

          firstValue: that.firstValue

        })

      }

      if (i >= 1) {//月份显示标记



        var s = currentNum - lastNum;

        var result = currentNum + "";

        if (s == 1 && i == 1) {

          that.setData({

            twoData: "#06c6ad",

            twoValue: result

          })

        } else if (s == 1 && i == 2) {

          that.setData({

            threeData: "#06c6ad",

            twoValue: result

          })

        } else if (s == 1 && i == 3) {

          that.setData({

            fourData: "#06c6ad",

            twoValue: result

          })

        } else if (s == 1 && i == 4) {

          that.setData({

            fiveData: "#06c6ad",

            twoValue: result

          })

        } else if (s == 1 && i == 5) {

          that.setData({

            sixData: "#06c6ad",

            twoValue: result

          })

        } else if (s == 1 && i == 6) {

          that.setData({

            sevenData: "#06c6ad",

            twoValue: result

          })

        }



      }



      lastNum = parseInt(times.substring(times.indexOf("-") + 1, times.lastIndexOf("-")));//数字



      if (i == 0) {

        that.data.temp = times;

        timeArr.push({ 'week': '今天', 'day': dateTemp, 'time': times });

      } else if (i == 1) {

        timeArr.push({ 'week': '明天', 'day': dateTemp, 'time': times });

      } else {

        timeArr.push({ 'week': week[myDate.getDay()], 'day': dateTemp, 'time': times });

      }

      myDate.setDate(myDate.getDate() + 1);

    }

    //更新数据

    that.setData({

      dateArray: timeArr,

      thisDate: timeArr[0].day,

      nowDate: times

    });

  },



  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {



  },



  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

    

  },



  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {



  },



  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {



  },



  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {



  },



  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {



  },



  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {



  },



  //转换为时间格式

  formatDate(time) {

    let show_day = new Array('周日', '周一', '周二', '周三', '周四', '周五', '周六');

    var date = new Date(time);



    date.setDate(date.getDate());

    let weekDay = date.getDay();

    var weekDate = show_day[weekDay]



    var YY = date.getFullYear() + '-';

    var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

    var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + " ";

    var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());

    var mm = ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());

    var ss = ':' + (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

    return YY + MM + DD + hh + mm + ss;

  },

})

三、clener.wxss代码内容

/* pages/load/rili/clener.wxss */



/* 月份标记 */

.month_tag {

  width: 100%;

  height: 40rpx;

  display: flex;

  margin-top: 20rpx;

  flex-direction: row;

  align-items: flex-end;

}



.one {

  width: 70rpx;

  text-align: center;

  font-size: 26rpx;

  margin-left: 17rpx;

}



.two {

  width: 70rpx;

  text-align: center;

  font-size: 26rpx;

  margin-left: 18rpx;

}



/* 服务时间 */

.services_time {

  background-color: #eeeeee;

  margin-top: 30rpx;

  border-radius: 20rpx;

  margin-left: 60rpx;

  margin-right: 60rpx;

  display: flex;

  flex-direction: column;

}



/* 时间段选择 */

.time_select {

  margin-top: 20rpx;

  margin-left: 10rpx;

  font-size: 28rpx;

  color: #434343;

  font-weight: bold;

}



.timeselect {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 70rpx;

  margin-left: 10rpx;

  margin-right: 10rpx;

  flex-wrap:wrap;

}



/* 时间段属性 */

#button_time {

  width: 48%;

  height: 60rpx;

  border-radius: 10rpx;

  text-align: left;

  font-size: 24rpx;

  background-color: rgba(255, 255, 255, 1);

  border: 2rpx solid #caccce;

  color: #666666;

  padding: 0rpx 10rpx;

  margin: 0rpx 5rpx 10rpx 0rpx;

  display: flex;

  align-items: center;

  justify-content: center;

}



#button_time::after {

  border: none

}



#button_time.active {

  height: 60rpx;

  background-color: #06c7ae;

  color: #fff

}



/* 周日期 */

.week_select {

  background-color: #f0f0f0;

}



.choose-time-middle {

  width: 100%;

  height: 120rpx;

  padding: 0rpx 0 0rpx 0;

  background-color: #f0f0f0;

}



.date view {

  float: left;

  width: 14%;

  padding-top: 10rpx;

  text-align: center;

}



/* 日期属性 */

.date view button {

  padding: 0;

  width: 70rpx;

  height: 60rpx;

  line-height: 60rpx;

  font-size: 28rpx;

  background-color: #ffff;

  border-radius: 10rpx;

}



/* 周属性 */

.week_data_num {

  color: #d1c1c1;

  font-size: 28rpx;

}



.date view button.active {

  background-color: #06c7ae;

  color: #fff;

}



.date view button::after {

  border: none;

}



.show-date {

  width: 100%;

  text-align: center;

  padding: 50rpx 0rpx;

}

四、clener.wxml代码内容

<!--pages/load/rili/clener.wxml-->

<!-- 预约时间选择 -->

<view class="services_time">

      <view class="time_select">

        时间选择

      </view>

      <!-- 月份标记 -->

      <view class="month_tag">

        <view class="one" style="color: {{oneData}}">{{firstValue}}月</view>

        <view class="one" style="color: {{twoData}}">{{twoValue}}月</view>

        <view class="one" style="color: {{threeData}}">{{twoValue}}月</view>

        <view class="one" style="color: {{fourData}}">{{twoValue}}月</view>

        <view class="two" style="color: {{fiveData}}">{{twoValue}}月</view>

        <view class="two" style="color: {{sixData}}">{{twoValue}}月</view>

        <view class="two" style="color: {{sevenData}}">{{twoValue}}月</view>

      </view>

      <view class="week_select">

        <view class="choose-time-middle">

          <view class="date">

            <!-- 日期 -->

            <view wx:for="{{dateArray}}" wx:key="index">

              <button class="{{item.day == thisDate ? 'active' : ''}}" data-id="{{item. day}}" bindtap="dateClick" data-time="{{item.time}}">{{item.day}}</button>

            </view>

            <text class="clearfix"></text>

          </view>

          <view class="date">

            <!-- 周日期 -->

            <view class="week_data_num" wx:for="{{dateArray}}" wx:key="index">{{item.week}}</view>

            <text class="clearfix"></text>

          </view>

        </view>



      </view>

      <!-- 时间段 -->

      <view class="timeselect">

        <button style="height: 70rpx;" id="button_time" wx:for="{{diseaseList}}" wx:key="*this" data-index="{{index}}" class="{{item.checked ? 'active' : ''}}" bindtap="diseaseSwitch">{{item.diseaseName}}</button>

      </view>

      <!-- 展示选中时间 -->

      <view class="show-date" hidden="true">

        <text>当前时间：{{nowDate}}</text>

      </view>

    </view>