怎么用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;
}

读到这里，这篇“怎么用js实现签到日历”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。