原生微信小程序实现打卡日历组件
2023-03-02 本文已影响0人
风中凌乱的男子
背景：最近接了个外包，其中有个打卡功能，里面包含了一个日历，甲方要求百分百还原，闲暇之余就撸了一下，下面是效果图 源码地址 https://github.com/chenxuba/xx-calendar 求star ✨
image.png
分析：
- 要求左右箭头可切换上下月;
- 需要展示农历日历；
- 点击日期拿到年月日（yyyy-mm-dd）
- 样式一比一还原
想法💡：网上都没一毛一样的组件，那还想个der，自己撸一个啊～
组件我起名：xx-calendar
- 第一步：在小程序
components目录下新建一个组件xx-calendar
image.png
- 第二步：在你想要引入的页面的xxx.json文件里引入该组件
{
"usingComponents": {
"xx-calendar":"../../components/xx-calendar/xx-calendar"
}
}
- 第三步：在xxx.wxml里使用该组件
<xx-calendar></xx-calendar>
- 第三步：前端写页面，啥都不要想，先撸样式，静态页面撸起走～
- 3.1 先撸头部
image.png
-
xx-calendar.wxml
<!--components/xx-calendar/xx-calendar.wxml-->
<!-- 头部 -->
<view class="title-wrap">
<view class="change-date">
<view class="prev">
<image src="./prev.png" mode="" />
</view>
<view class="year-mouth">
2023年 1月
</view>
<view clstyle="next">
<image src="./next.png" mode="" />
</view>
</view>
<view class="week">
<text>日</text>
<text>一</text>
<text>二</text>
<text>三</text>
<text>四</text>
<text>五</text>
<text>六</text>
</view>
</view>
<!-- 日期 -->
<view class="date-wrap">
<!-- 上个月日期 -->
<view class="mouth-date last-mouth">
<text class="day-text">29</text>
<text class="day-nongli">十五</text>
<text class="day-dot"></text>
</view>
<view class="mouth-date last-mouth">
<text class="day-text">30</text>
<text class="day-nongli">十六</text>
<text class="day-dot"></text>
</view>
<view class="mouth-date last-mouth">
<text class="day-text">31</text>
<text class="day-nongli">十七</text>
<text class="day-dot"></text>
</view>
<!-- 当月日期 -->
<view class="mouth-date current-mouth" wx:for="{{31}}">
<view class="day-box {{index==0?'active':''}}">
<text class="day-text {{index==2||index==4||index==6||index==8?'color':''}}">{{index+1}}</text>
<text class="day-nongli">十八</text>
<text class=" {{index==2||index==4||index==6||index==8?'day-dot':'not-dot'}}"></text>
</view>
</view>
<!-- 下个月日期 -->
<view class="mouth-date next-mouth">
<text class="day-text">1</text>
<text class="day-nongli">十五</text>
<text class="day-dot"></text>
</view>
</view>
-
xx-calendar.wxss
/* components/xx-calendar/xx-calendar.wxss */
/* 头部样式start */
.title-wrap{
background-color: #fff;
padding-top: 20rpx;
border-bottom: 1px solid #D4DBDC;
padding-bottom: 10rpx;
}
.change-date{
display: flex;
justify-content: center;
align-items: center;
}
.change-date image{
width: 50rpx;
height: 50rpx;
transform: scale(1.5);
display: flex;
}
.year-mouth{
margin: 0 60rpx;
}
.week{
display: flex;
justify-content: space-between;
font-size: 24rpx;
margin-top: 30rpx;
color: #1F1F1F;
}
.week text{
flex: 1;
text-align: center;
}
/* 头部样式end */
/* 日期区域样式start */
.date-wrap{
height: 500rpx;
background-color: #F8F9F9;
display: flex;
flex-wrap: wrap;
}
.mouth-date{
display: flex;
font-size: 24rpx;
flex-direction: column;
align-items: center;
width: calc(100% / 7);
border-bottom: 1rpx solid rgb(229, 234, 235);
padding-top: 10rpx;
}
.last-mouth text,.next-mouth text{
opacity: 0;
}
.mouth-date .day{
display: flex;
flex-direction: column;
align-items: center;
color: #1F1F1F;
}
.mouth-date .day-nongli{
font-size: 18rpx;
color: #888888;
margin-bottom: 6rpx;
}
.mouth-date .color{
color: #8096F0;
}
.mouth-date .day-dot{
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background-color: #8096F0;
}
.mouth-date .day-box{
border-radius: 10rpx;
width: 80rpx;
padding-top: 6rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.mouth-date .active{
background-color: #A1D7EE;
}
.mouth-date .active text{
color: #fff;
}
.mouth-date .active .day-text{
font-weight: 600;
}
.not-dot{
width: 8rpx;
height: 8rpx;
}
- 样式写完就是下面这个样子了，注意：⚠️
css和dom后面还会根据实际情况微调
image.png
- 选中状态和已打卡样式都暂时是根据索引模拟出来的，农历日期也不对
- 下面就来写js，
获取上个月日期数组、当月日期数组和下个月日期数组 - 农历暂时先放一放
- 下面先来写三个方法，分别来
获取上个月日期、当月日期和下个月日期 -
xx-calendar.js
- 点定义好本月的年月，渲染日历头部，并且把星期也换成变量，即：
data:{
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
}
- 在日历dom处渲染这三个变量
image.png
image.png
- 下面在data里再定义几个变量，用来存储日期
data:{
nowMonth: new Date().getMonth() + 1, //本月是几月
nowDay: new Date().getDate(), //本月当天的日期
lastMonthDays: [], //上一个月
nowMonthDays: [], //本月
nextMonthDays: [], //下一个月
}
- 在methods里定义三个方法
/**
* 组件的方法列表
*/
methods: {
/** 获取上个月日期 */
getLastMonthDays(year,month){},
/** 获取当月日期 */
getNowMonthDays(year, month) {},
/** 获取下个月日期 */
getNextMonthDays(year, month) {},
}
- 为了方便调用，写一个总方法，一并调用这三个方法，并在ready里调用这个总方法，传入year和month，逻辑需要，还要写一个
获取当月天数的方法
/**
* 组件的方法列表
*/
methods: {
//获取当月天数
getThisMonthDays(year, month) {
return new Date(year, month, 0).getDate();
},
/** 总方法 */
//创建日期
createDays(year, month) {
this.getLastMonthDays(year, month)
this.getNowMonthDays(year, month)
this.getNextMonthDays(year, month)
},
/** 获取上个月日期 */
getLastMonthDays(year, month) {},
/** 获取当月日期 */
getNowMonthDays(year, month) {},
/** 获取下个月日期 */
getNextMonthDays(year, month) {},
},
ready(){
let { year,month } = this.data
this.createDays(year,month)
}
- 接下来，先写获取上个月日期的方法，如下：
/** 获取上个月日期 */
getLastMonthDays(year, month) {
let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
let lastMonthDays = []
if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
//上个月显示多少天
let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年
//上个月从几号开始显示
for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
lastMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.setData({
lastMonthDays
})
console.log(lastMonthDays);
},
- 打印结果可以看到 ，已经拿到上个月的日期已经对应的数据
- ⚠️：
安卓手机上会存在bug，写法造成的，解决方法我放到文章最后
image.png
- 上个月的日期已经拿到了，下面可以在dom里渲染这个
【lastMonthDays】数组了
image.png
- 下面在编写获取当月日期的方法
getNowMonthDays(year, month) {
let {
nowMonth,
nowDay
} = this.data
let nowMonthDays = []
let days = this.getThisMonthDays(year, month); //获取当月的天数
for (let i = 1; i <= days; i++) {
let d = new Date(year, month - 1, i)
let years = d.getFullYear()
let months = d.getMonth() + 1
let day = d.getDate()
let time = `${years+'/'+months +'/'+day}` // 2023/3/3
nowMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
time,
color: false, //为已打卡日期样式做准备
day, //后面会改成农历
isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
});
}
this.setData({
nowMonthDays
})
console.log(nowMonthDays);
},
- 打印可以拿到当月的所有日期数组，主要圈出来的，默认选中当天的日期
image.png
-
日期数组拿到了，当天的选中状态条件也拿到了，下面微调下dom，渲染【nowMonthDays】和完善默认选中条件
image.png
- 在接下来，编写获取下个月的日期方法
/** 获取下个月日期 */
getNextMonthDays(year, month) {
let {
lastMonthDays,
nowMonthDays,
} = this.data
let nextMonthDays = []
let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
if (nextMonthNums) { //判断当前天数是否大于零
for (let i = 1; i <= nextMonthNums; i++) {
let time = new Date(year, month - 1, i).toLocaleDateString()
nextMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
time,
isNowMonthDay: ''
});
}
}
this.setData({
nextMonthDays
})
console.log(nextMonthDays)
},
- 打印数组
image.png
- 下面渲染这个【nextMonthDays】数组
image.png
- 还没渲染农历的样子，就是下图
image.png
-
下面渲染农历，需要用到一个公共方法，这个方法很复杂，也很长，就不再这里展示了，你可以访问我的github仓库下载源码获取这个方法. https://github.com/chenxuba/xx-calendar
- 页面内引入这个js
import calendarFormatter from "./index";
- 需要修改的是获取当月日期的这个方法，上下月都不展示，就不修改其他俩方法了，如果你需要请自行二开
getNowMonthDays(year, month) {
let {
nowMonth,
nowDay
} = this.data
let nowMonthDays = []
let days = this.getThisMonthDays(year, month); //获取当月的天数
for (let i = 1; i <= days; i++) {
let d = new Date(year, month - 1, i)
let years = d.getFullYear()
let months = d.getMonth() + 1
let day2 = d.getDate()
let time = `${years+'/'+months +'/'+day2}` // 2023/3/3
let timer = time.replace(/\//g, "-")
let timer2 = timer.split('-')
var day = calendarFormatter.solar2lunar(timer2[0], timer2[1], timer2[2]);
let newdate
if (day.IDayCn == '初一') {
newdate = day.IMonthCn
} else {
newdate = day.IDayCn
}
nowMonthDays.push({
date: i, //几号
week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
time,
color: false,
day: newdate,
isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : ""
});
}
this.setData({
nowMonthDays
})
console.log(nowMonthDays);
},
嗯～实现了
image.png
- 下面在实现点击左右箭头切换月份
image.png
/** 切换月份 */
changeMonthFun(e){
let {
year,
month
} = this.data
let type = e.currentTarget.dataset.type //类型
if (type == 'prev') { //上一个月
year = month - 1 > 0 ? year : year - 1
month = month - 1 > 0 ? month - 1 : 12
} else { //next 下个月
year = (parseInt(month) + 1) > 12 ? year + 1 : year
month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
}
this.setData({
year,
month,
})
this.createDays(year, month)
}
- 这样就实现了切换月份
image.png
- 有点小瑕疵，不打紧，之前写静态页面的时候固定高度了，注释掉就可以了
image.png
- 一切正常
image.png
- 下面在实现点击日期，拿到当前年月日
selectDate(e){
let type = e.currentTarget.dataset.type //选择的时间类型
let index = e.currentTarget.dataset.index //选择的下标
let date = e.currentTarget.dataset.item.time //选择的下标
let selectDate = date.replace(/\//g, "-")
console.log("选择的时间", selectDate)
// 自定义事件，父组件调用，回调 选择的时间selectDate
this.triggerEvent('selectDate', selectDate)
//将选择的时间类型的 isNowMonthDay 全改为''
this.data[type]?.forEach(item => {
item.isNowMonthDay = ''
})
this.data[type]?.forEach((item, idx) => {
if (index == idx) {
item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
} else {
item.isNowMonthDay = ''
}
})
this.setData({
[type]: this.data[type],
})
},
image.png
-
最后实现 已打卡日期的样式展示，要从父组件接收一个已打卡日期数组，通过对比当月日期，来动态改变之前备用的
color字段 - 先接收一个数组
/**
* 组件的属性列表
*/
properties: {
use_date_arr:{
type:Array,
value:[]
}
},
- 然后修改
getNowMonthDays方法
this.data.use_date_arr.forEach(ele => {
ele = ele.replace(/\-/g, "/")
nowMonthDays.forEach(item => {
if (ele == item.time) {
console.log(item);
item.color = true
}
})
})
image.png
- 然后在父组件传入这个
use_date_arr数组
data: {
use_date_arr:['2023-3-1','2023-3-2','2023-3-3','2023-3-5','2023-3-8']
},
<xx-calendar use_date_arr="{{use_date_arr}}"></xx-calendar>
- 最后的效果
image.png
- 取消高度导致圆点没距离了，稍微微调下
image.png
- 搞定
image.png
