怎么用js实现签到日历

本文小编为大家详细介绍“怎么用js实现签到日历”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用js实现签到日历”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

wxml代码

<view class="boxMain" >
    <view class="calendarHeader">
        <view>本月已签到<text>{{recordList.length}}</text>天</view>
    </view>
    <view class="calendarChange">
        <view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth-1}}">
            <image mode="widthFix" src="{{static}}left_arrow.png"></image>
        </view>                
        <text>{{chooseYear}}年{{chooseMonth+1}}月</text>
        <view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth+1}}">
            <image mode="widthFix" src="{{static}}right_arrow.png"></image>
        </view>
    </view>
    <view class="calendarContent">
        <view class="calendarWeek">
            <text>日</text>
            <text>一</text>
            <text>二</text>
            <text>三</text>
            <text>四</text>
            <text>五</text>
            <text>六</text>
        </view>
        <view class="calendarDays">
            <view wx:for="{{dateList}}" wx:key="index" wx:for-item="dateItem">
                <view >
                    {{dateItem.day}}
                </view>      
            </view>
        </view>
    </view>
</view>

js代码：

const app = getApp()
const http = require('../../config/api.js');
Page({
  data: {
    static: app.data.static,
    recordList: [],
    totalReward: {},
    dateList: [],
    chooseYear: new Date().getFullYear(),
    chooseMonth: new Date().getMonth(),
    currentDay: new Date().getDate(),
    dayNumsByMonth: null
  },
  onLoad() {
    this.initDateList(); //初始化日历
  },
  initDateList: function (e) {
    let that = this;
 
    let chooseMonth = that.data.chooseMonth;
    let chooseYear = that.data.chooseYear;
 
    let currentDate = new Date();
    let currentYear = currentDate.getFullYear();
    let currentMonth = currentDate.getMonth();
 
    if (e) {
      chooseMonth = e.currentTarget.dataset.month;
      if (chooseMonth >= 12) {
        chooseMonth = chooseMonth - 12;
        chooseYear = chooseYear + 1;
      } else if (chooseMonth < 0) {
        chooseMonth = chooseMonth + 12;
        chooseYear = chooseYear - 1;
      } else {
        chooseMonth = chooseMonth;
      }
      let monthCount = (currentYear - chooseYear) * 12 + currentMonth - chooseMonth;
      if (monthCount > 0 && Math.abs(monthCount) > 6) {
        wx.showToast({
          title: '往前最多查看六个月',
          icon: 'none',
          duration: 1500
        })
 
        return
      } else if (monthCount < 0 && Math.abs(monthCount) > 1) {
        wx.showToast({
          title: '往后最多查看一个月',
          icon: 'none',
          duration: 1500
        })
        return
      }
    }
 
    that.setData({
      chooseMonth: chooseMonth,
      chooseYear: chooseYear
    })
    var dateList = [];
 
    let firstDayWeek = new Date(that.data.chooseYear, that.data.chooseMonth, 1).getDay();
    let dayNumsByMonth = new Date(that.data.chooseYear, that.data.chooseMonth + 1, 0).getDate();
    that.setData({
      dayNumsByMonth: dayNumsByMonth
    })
 
    for (let i = 0; i < 43; i++) {
      let day = i - firstDayWeek + 1;
      if (day > dayNumsByMonth && (i == 35 || i == 42)) {
        that.setData({
          dateList: dateList
        });
        return
      }
      dateList.push({
        'year': '',
        'month': '',
        'day': '',
        'type': '',
      })
 
      if (day > 0 && day <= dayNumsByMonth) {
        dateList[i].year = that.data.chooseYear;
        dateList[i].month = that.isTen(that.data.chooseMonth + 1);
        dateList[i].day = that.isTen(day);
        if (that.data.chooseYear == currentYear && that.data.chooseMonth == currentMonth) {
 
          if (day < that.data.currentDay) {
            dateList[i].type = 'before';
          } else if (day > that.data.currentDay) {
            dateList[i].type = 'after';
          } else {
            dateList[i].type = 'current'
          }
          
        } else if (that.data.chooseYear < currentYear || (that.data.chooseYear == currentYear && that.data.chooseMonth < currentMonth)) {
          dateList[i].type = 'before';
         
        } else {
          dateList[i].type = 'after';
        }
      }
    }
  },
  isTen: function (v) {
    return v >= 10 ? v : `0${v}`
  }
});

wxss代码

.boxMain {
  background-color: #fff;
  margin: 36rpx 30rpx 22rpx 30rpx;
  border-radius: 10rpx;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
}
 
.boxMain .calendarHeader {
  display: flex;
  justify-content: space-between;
  color: #333333;
  font-size: 28rpx;
  margin-top: 40rpx;
  padding: 0 4rpx;
}
 
.boxMain .calendarHeader view text {
  color: #FE7458;
  padding: 0 6rpx;
}
 
.boxMain .calendarHeader view:last-child {
  font-size: 24rpx;
}
 
.boxMain .calendarChange {
  display: flex;
  padding: 0 50rpx;
  align-items: center;
  justify-content: space-between;
  background-color: #F8F8FA;
  border-radius: 25rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  text-align: center;
  margin: 25rpx 0;
}
.boxMain .calendarChange .calendarChangeLeftRight{
  width: 50rpx;
  height: 50rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.boxMain .calendarChange image{
  width: 12rpx;
  margin: 0 auto;
}
.boxMain .calendarContent .calendarWeek{
  font-size: 26rpx;
  display: flex;    
  justify-content: space-between;
}
.boxMain .calendarContent .calendarWeek text{
  width: 14%;
  height: 40rpx;
  text-align: center;
}
.boxMain .calendarContent .calendarDays{
  font-size: 26rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap;
  align-items: center;
  margin-top: 47rpx;
}
.boxMain .calendarContent .calendarDays>view{
  width: 14%;
  text-align: center;
  display: block;    
  margin-bottom: 32rpx;
  height: 46rpx;
  line-height: 46rpx;
}
.boxMain .calendarContent .calendarDays>view>view{
  width: 46rpx;
  height: 46rpx;
  margin: 0 auto;
  border-radius: 50%;
}
.boxMain .calendarContent .calendarDays .box{
  margin-top: -10rpx;
}
.boxMain .calendarContent .calendarDays .box image{
  width: 42rpx;
}
.boxMain .calendarContent .calendarDays .box text{
  float: left;
  margin-top: -20rpx;
  padding-left: 4rpx;
  color: #FE7458;
}