微信小程序日历

客官°小女子只卖身不卖艺 2023-06-08 06:35 62阅读 0赞

首先，做完的页面展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
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;
    }
    /*签到结束*/

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_NaN]，因为ios只识别2019/10/17这种日期格式，所以改成

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

安卓2个都可以使用

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: /images/20230531/29ae8aa21ad54211ad3821af6e61881f.png
[IOS_NaN]: https://www.jianshu.com/p/bc7eea1cec70
[Link 1]: https://www.cnblogs.com/huiAlex/p/9463037.html