前言
因為要做簽到,所以要寫了個日曆。
只有基礎的日曆,簽到需要自行實現。
(我等下也要實現簽到了…)
效果圖
wxml
<view class="sign-wrapper">
<view class="calendar">
<view class="month">
<view class="item" wx:for="{{ week }}">
{{ item }}
</view>
<view class="item {{ item.type != 'curr' ? 'othe' : '' }}"
wx:for="{{ dateData }}">
{{ item.day }}
</view>
</view>
</view>
</view>
wxss
.calendar{
margin-top: 10%;
}
.month{
display: flex;
flex-flow: row wrap;
font-size: 1.1rem;
}
.item{
width: 14.28%;
text-align: center;
line-height: 3rem;
}
.othe{
color: grey
}
js
// pages/sing_in/sing_in.js
Page({
data: {
dateData: [],
isSignin: false,
week: ['日','一','二','三','四','五','六'],
},
onLoad: function (options) {
this.initCurrMonthData()
},
/**
* year string 年 如:2020
* month string 月 如: 5
* return array 所有天數 如:[1,2,3...,31]
**/
monthDays(year,month){
let days_count = new Date(year,month,0).getDate() //月總天數 如:31
let days = []; //存放月的天數
for(let i = 1; i <= days_count; i++)
days.push(i)
return days;
},
//初始化當月資料
initCurrMonthData(){
let currDate = new Date(); //當前日期
let currMonthDays = this.monthDays(currDate.getFullYear(),currDate.getMonth() + 1) //當月 +1是因為月從0開始 只有0-11
let lastMonthDays = this.monthDays(currDate.getFullYear(),currDate.getMonth() ) //上個月
let currFirstWeek = new Date(currDate.getFullYear(),currDate.getMonth() - 1, 1).getDay() + 1; //這個月的1號是星期幾 -1是因從0開始
//月最後一天是星期幾
let dateData = [];
dateData = currMonthDays.map(val => this.formatDay(val)) //當月的資料
for(let i = 0; i < currFirstWeek; i++) //上月要顯示的
dateData.unshift(
this.formatDay( lastMonthDays.pop(),'last')
);
let nextLenth = 42 - dateData.length; // 42是因為 6 * 7格式
for(var i = 1; i <= nextLenth; i++) //下個月需要顯示的日期
dateData.push(
this.formatDay( i, 'next')
);
this.setData({
dateData : dateData
})
},
formatDay(day,type = 'curr'){ //日期資料的格式化
return {day:day,type:type};
},
onShareAppMessage: function () {
}
})
本作品採用《CC 協議》,轉載必須註明作者和本文連結