微信小程序中自带得日期选择器用起来很舒服,但是不太适合项目,日历插件也是比较简单得东西,就随手写了一个。话不多说,先上demo。
日历最重要的就是日期正确。
我们写日历的时候只需要知道几个因素就行:
知道这两个信息之后,我们的日历就会自动空出相应的格数,并依次展示出剩余的日期。
当我们打开日历时,首先出现的肯定是当前日期。
那我们就先创建一个获取当前日期的函数:
initDay() {
let date = new Date()
//获取当前的年月日
let currentYear = date.getFullYear(),
currentMonth = date.getMonth(),
currentDay = date.getDate()
//获取当年,当月的天数 getDate(),此时month+1
let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
//获取该月1号是周几,getDay(),注意此时month不加1
let week = new Date(currentYear, currentMonth, 1).getDay()
this.setData({
currentYear: currentYear,
currentMonth: currentMonth,
currentDay: currentDay,
monthNum: monthNum,
week: week,
//这里的now代表今天对应的日期,存在data中,
//点击回到今天时再从data中取出
nowYear: currentYear,
nowMonth: currentMonth,
nowDay: currentDay
})
}
其中获取当月的天数只需在new Date() 依次填入年份,月份+1,0,然后使用getDate()的方法便可获取。
获取前面空几格,也就是当月1号是周几,依次填入年份,月份,1,然后使用getDay()的方法便可获取,结果是0就是周日,1就是周一,2–>周二依次类推。
日历渲染,一个格子为一天。我们可以使用 grid 布局, grid-template-columns: repeat(7, 1fr);
,将宽度等分成7份,也就是一行7个格子,为一周。
我们已经知道了当月的天数,又知道了该月1号是周几,所以一共循环 天数(monthNum) + 周几(week)
次就可以了。然后每个格子的值就是它们的 Index - week +1
。
然后,我们只保留值大于0的格子 。{{index-week+1 >0?index-week+1:''}}
<view class="calender {{anmation? 'animation-slide-skew':''}}">
<view wx:for='{{monthNum+week}}' class="cal-body {{index-week+1==currentDay&&nowMonth==currentMonth&&nowYear==currentYear?'now':''}}" wx:key='index' data-day="{{index-week+1}}" bindtap="choseDay">
<view class="{{index-week+1>0?'cal-text ':''}} {{choseDay==index-week+1&¤tMonth==choseMonth?'chose':''}}" >{{index-week+1 >0?index-week+1:''}}view>
view>
view>
此时,我们当月的信息就出来了。
只有当月肯定是不够的,我们通过点击 <
>
进行翻月,翻页。
当我们点击上一月的时候,当前选择的月份(currentMonth) -1;
点击下一月的时候,当前选择的月份(currrentMonth) +1 。
月份小于1的时候,再点击上一月,当前年份(currentYear) -1 ,月份成为11-1;
同理,加的时候大于11,年份+1,月份变成 0+1。
翻页代码实现如下:
lastMonth() {
this.setData({
anmation:true
})
//计算余数,除以12之后的余数便是要减的月份数
let Remainder = this.data.currentMonth % 12;
if (this.data.currentMonth < 1) {
//parseInt(this.data.currentMonth / 12) 计算整数,得到的值就是要减的年
//如果当前选择的月份是负数,需要减整数后再-1
var currentYear = this.data.currentYear - 1 - parseInt(this.data.currentMonth / 12)
var currentMonth = 12 - Math.abs(Remainder) - 1
} else {
var currentYear = this.data.currentYear + parseInt(this.data.currentMonth / 12)
var currentMonth = Remainder - 1
}
let monthInt = parseInt(this.data.currentMonth / 12)
// let currentDay = this.data.currentDay;
let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
let week = new Date(currentYear, currentMonth, 1).getDay()
this.setData({
currentYear: currentYear,
currentMonth: currentMonth,
monthNum: monthNum,
week: week
})
console.log(currentYear, currentMonth, week, monthNum)
},
nextMonth() {
this.setData({
anmation:true
})
let Remainder = (this.data.currentMonth + 1) % 12;
if (Remainder < 0) {
var currentYear = this.data.currentYear - 1 - parseInt(Remainder / 12)
var currentMonth = 12 - Math.abs(Remainder)
} else {
// console.log(Remainder)
var currentYear = Remainder == 0 ? this.data.currentYear + 1 : this.data.currentYear + parseInt(Remainder / 12)
var currentMonth = Remainder
}
let monthInt = parseInt(this.data.currentMonth / 12)
// let currentDay = this.data.currentDay;
let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
let week = new Date(currentYear, currentMonth, 1).getDay()
this.setData({
currentYear: currentYear,
currentMonth: currentMonth,
monthNum: monthNum,
week: week
})
console.log(currentYear, currentMonth, week, monthNum)
}
大致原理就是这样,完整代码在GitHub:Jarry007
要是对您有帮助,请去github上点个star,谢谢