wxml部分
<view class='wrap'>
<view>
<view class='date-show'>
<view class='lt-arrow' bindtap='lastMonth'>
<image src='{{左方向箭头}}' mode='aspectFit'></image>
</view>
签到日历({{month}}月)
<view class='rt-arrow' bindtap='nextMonth'>
<image src='{{右方向箭头}}' mode='aspectFit'></image>
</view>
</view>
</view>
<!-- 星期展示 -->
<view class='header'>
<view wx:for='{{date}}' wx:key="index" class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
<view></view>
</view>
</view>
<!-- 日期展示 -->
<view class='date-box'>
<view wx:for='{{dateArr}}' wx:key="index" class='{{isSign.is(isToday,item.isToday).indexOf ? "nowDay" : ""}}' data-date='{{item.isToday}}'>
<view class='date-head'>
<view>{{item.dateNum}}</view>
</view>
</view>
</view>
</view>
wxss部分
.wrap {
background: #fff;
margin-top: 40rpx;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
}
.date-show {
position: relative;
width: 250rpx;
font-family: PingFang-SC-Regular;
font-size: 29rpx;
color: #666666;
text-align: center;
margin: 35rpx auto 10rpx;
}
.lt-arrow, .rt-arrow {
position: absolute;
top: 1rpx;
width: 60rpx;
height: 60rpx;
padding-right: 0.6rem;
}
.lt-arrow image, .rt-arrow image {
width: 16rpx;
height: 24rpx;
}
.lt-arrow {
left: -220rpx;
}
.rt-arrow {
right: -220rpx;
}
.header {
margin-top: 36rpx;
font-size: 0;
border-top: 1rpx solid #eaeaea;
}
.header>view {
display: inline-block;
width: 14.285%;
color: #333;
font-size: 30rpx;
text-align: center;
padding: 39rpx 0;
}
.weekMark {
position: relative;
}
.weekMark view {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.date-box {
font-size: 0;
padding: 5rpx 0;
-webkit-overflow-scrolling: touch;
}
.date-box>view {
position: relative;
display: inline-block;
width: 14.285%;
color: #020202;
font-size: 30rpx;
text-align: center;
vertical-align: middle;
margin: 10rpx 0;
}
.date-head {
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
}
.nowDay .date-head {
width: 60rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background: 想要的颜色;
background-size: 60rpx 60rpx;
margin: 0 auto;
}
.date-weight {
font-size: 22rpx;
padding: 15rpx 0;
}
.nowDay .date-weight {
color: #22a7f6;
}
.one {
position: absolute;
bottom: 0;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: red;
}
.two {
position: absolute;
bottom: 30rpx;
right: 5rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: blue;
}
js部分
data: {
//初始化年月日
year: 0,
month: 0,
date: ['日', '一', '二', '三', '四', '五', '六'],
dateArr: [],
isToday: [],
isTodayWeek: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.init()
this.getSignData()
},
init : function(){
//获取当前日期
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
this.dateInit();
this.setData({
year: year,
month: month,
})
},
//获取签到列表
getSignData: function() {
var dataArray = [{"sign_time":"1587367386"},{"sign_time":"1586937453"},{"sign_time":"1585704891"},{"sign_time":"1585623655"},{"sign_time":"1585291675"},{"sign_time":"1585014197"},{"sign_time":"1584947763"},{"sign_time":"1584947730"},{"sign_time":"1584947713"},{"sign_time":"1582792567"},{"sign_time":"1579404181"},{"sign_time":"1579250184"},{"sign_time":"1579056258"},{"sign_time":"1578877416"},{"sign_time":"1578619749"},{"sign_time":"1578533413"},{"sign_time":"1578479831"},{"sign_time":"1578360671"},{"sign_time":"1578275664"},{"sign_time":"1578032758"},{"sign_time":"1577934870"},{"sign_time":"1577754441"},{"sign_time":"1577670165"},{"sign_time":"1577436593"},{"sign_time":"1577339322"},{"sign_time":"1577083170"},{"sign_time":"1576567052"},{"sign_time":"1576307821"},{"sign_time":"1576221412"},{"sign_time":"1576135002"},{"sign_time":"1576048591"},{"sign_time":"1575962178"},{"sign_time":"1575875764"},{"sign_time":"1575788488"},{"sign_time":"1575705872"}]
let array = new Array()
for(var i=0;i<dataArray.length;i++){
array.push(time.formatTime2Date(dataArray[i].sign_time))
}
this.setData({
isToday : array
})
},
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号对应的星期几
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;
//这里月份从 0 开始 所以+1
month+=1
//这里月份本地时间戳转换日期为01月所以判断一下前面加个0 和具体天数一样的操作
if(month<=9){
month = '0'+month
}
for (let i = 0; i < arrLen; i++) {
if (i >= startWeek) {
num = i - startWeek + 1;
if(num <= 9){
num = '0' + num
}
obj = {
isToday: year +'年'+ month +'月' + 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);
},
js中引用的time文件部分 以及 xml中引用的文件
<wxs src="../../../utils/sign.wxs" module="isSign"/>
//这里的time是文件需要外部引用
function formatTime2Date(timeStamp) {
return formatTime2DateNew(timeStamp, 1)
}
/**
* 按指定类型格式化时间戳为日期
*/
function formatTime2DateNew(timeStamp, type) {
if (timeStamp == undefined || timeStamp <= 0) {
timeStamp = getTimeStamp()
}
var fullTimeStamp = timeStamp * 1000
var newDate = new Date(fullTimeStamp)
var year = newDate.getFullYear()
var month = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1)
var day = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate()
var hour = newDate.getHours()
var min = newDate.getMinutes()
var second = newDate.getSeconds()
if (type == 1) {
return year + "年" + month + "月" + day + "日"
}
}
//wxml中引用的文件
//在wxml里面引用 可以使用indexOf
function sign(arr, arg) {
var result = {
indexOf: false,
toString: ''
}
result.indexOf = arr.indexOf(arg) > -1;
result.toString = arr.join(",");
return result;
}
module.exports.is = sign