微信小程序日历

首先，做完的页面展示

html

<!-- 签到 -->
<view class="sign">
  <view class='wrap'>
    <!-- 显示年月 -->
    <view>
      <view class='selectDate'>
        <view class='goleft' bindtap='lastMonth'>
          <image src="../../assets/img/sign/left.png" class="signImgLeft" mode="widthFix"></image>
        </view>
        <view class="date-wrap">
          {{year}}年{{month}}月
        </view>
        <view class='goright' bindtap='nextMonth'>
          <image src="../../assets/img/sign/right.png" class="signImgLeft" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <!-- 周 -->
    <view class='week'>
      <view wx:for='{{date}}' class="weekText" wx:key="{{index}}">{{item}}
        <view></view>
      </view>
    </view>
    <!-- 日 -->
    <view class='date-box'>
      <view wx:for='{{dateArr}}' class='{{isToday == item.isToday ? "nowDay" : ""}}' data-date='{{item.isToday}}' wx:key="{{index}}">
        <view class='date-head'>
          <view>{{item.dateNum}}</view>
        </view>
      </view>
    </view>
    <!-- 立即签到 -->
    <view class="signView">
      <view class="signBtn" bindtap="signBtn">立即签到</view>
    </view>
  </view>
</view>

css

/*签到*/
.sign{
  width: 676rpx;
  min-height: 484rpx;
  background: #fff;
  border-radius: 8rpx;
  margin: auto;
  margin-top: 50rpx;
}
.selectDate{
  height: 64rpx;
  text-align: center;
  position: relative;

}
.date-wrap{
  color: #8B6D51;
  font-size: 24rpx;
  font-weight:500;
  line-height: 64rpx;
}

.signImgLeft{
  width: 14rpx;
  margin-top: 20rpx;
}
.goleft{
  height: 64rpx;
  width: 64rpx;
  position: absolute;
  left: 20rpx;
  top: 0;
}
.goright{
  height: 64rpx;
  width: 64rpx;
  position: absolute;
  right: 20rpx;
  top: 0;
}
.week{
  height: 34rpx;
  line-height: 34rpx;
}
.weekText{
  float: left;
  width: calc(100% / 7);
  text-align: center;
  color: #999999;
  font-size: 24rpx;
}
.day{
  color: #333333;
  font-size: 24rpx;
}
.date-box{
  font-size: 0;
  margin-top: 14rpx;
}
.date-box>view{
  display: inline-block;
  width: calc(100% / 7);
  text-align: center;
  color: #333333;
  font-size: 24rpx;
  margin-bottom: 20rpx;
}
.date-box>view.nowDay{/*今天日期样式*/
  color: red;
}
.signBtn{
  width: 400rpx;
  height: 80rpx;
  margin: auto;
  background: #F7B500;
  border-radius: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #fff;
  font-size: 28rpx;
}
.signView{
  padding: 10rpx 0 16rpx 0;
}
/*签到结束*/

js

Page({
  /**页面的初始数据*/
  data: {
    //日历使用的data
    year: 0,
    month: 0,
    date: ['日', '一', '二', '三', '四', '五', '六'],
    dateArr: [],
    isToday: 0,
    isTodayWeek: false,
    todayIndex: 0,
    //日历使用的data结束
    SignPresentList:[{},{},{},{}],//签到优惠券列表
    signRuleNum:0,//签到规则显示隐藏判断
    popUpNum: 0,//签到的弹窗显示隐藏判断
  },
  /**生命周期函数--监听页面加载*/
  onLoad: function (options) {
    let that=this
    let now = new Date(); //获取时间
    let year = now.getFullYear();//获取当前年
    let month = now.getMonth() + 1;//获取当前月份
    this.dateInit();
    this.setData({
      year: year,
      month: month,
      isToday: '' + year + month + now.getDate()  //当前的时间
    })
  },
  /**生命周期函数--监听页面初次渲染完成*/
  onReady: function () {},
  /**生命周期函数--监听页面显示*/
  onShow: function () {},
  /**生命周期函数--监听页面隐藏*/
  onHide: function () {},
  /** 生命周期函数--监听页面卸载*/
  onUnload: function () {},
  /**页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function () {},
  /**页面上拉触底事件的处理函数*/
  onReachBottom: function () {},
  /**用户点击右上角分享*/
  onShareAppMessage: function () { },

  //日历
  dateInit: function (setYear, setMonth) {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let dateArr = [];                        //需要遍历的日历数组数据
    let arrLen = 0;                            //dateArr的数组长度
    let now = setYear ? new Date(setYear, setMonth) : new Date();
    let year = setYear || now.getFullYear();
    let nextYear = 0;
    let month = setMonth || now.getMonth();                    //没有+1方便后面计算当月总天数
    let nextMonth = (month + 1) > 11 ? 1 : (month + 1); //下个月
    let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay();                            //目标月1号对应的星期,ios的手机只能使用2019/01/01的日期格式，安卓还可以使用2019,,01,01日期格式
    let dayNums = new Date(year, nextMonth, 0).getDate();                //获取目标月有多少天
    let obj = {};
    let num = 0;

    if (month + 1 > 11) {
      nextYear = year + 1;
      dayNums = new Date(nextYear, nextMonth, 0).getDate();
    }
    arrLen = startWeek + dayNums;
    for (let i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        obj = {
          isToday: '' + year + (month + 1) + num,
          dateNum: num,
          weight: 5
        }
      } else {
        obj = {};
      }
      dateArr[i] = obj;
    }
    this.setData({
      dateArr: dateArr
    })
    let nowDate = new Date();
    let nowYear = nowDate.getFullYear();
    let nowMonth = nowDate.getMonth() + 1;
    let nowWeek = nowDate.getDay();
    let getYear = setYear || nowYear;
    let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;

    if (nowYear == getYear && nowMonth == getMonth) {
      this.setData({
        isTodayWeek: true,
        todayIndex: nowWeek
      })
    } else {
      this.setData({
        isTodayWeek: false,
        todayIndex: -1
      })
    }
  },
  lastMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.dateInit(year, month);
  },
  nextMonth: function () {
    //全部时间的月份都是按0~11基准，显示月份才+1
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
    let month = this.data.month > 11 ? 0 : this.data.month;
    this.setData({
      year: year,
      month: (month + 1)
    })
    this.dateInit(year, month);
  }
  //日历结束
})

这是扣大佬的代码，但是有一个问题，之前有段代码是这样的

let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay();

这段代码在安卓上可以输入，比如2019/10/17日输出是“2”，但是在ios上输出NaN，后来查了下微信小程序IOS日期显示NaN，因为ios只识别2019/10/17这种日期格式，所以改成

let startWeek = new Date(year + '/' + (month + 1) + '/' + 1).getDay();     

安卓2个都可以使用

这个是大佬的链接 微信小程序：实现日历功能

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！