微信小程序中自带得日期选择器用起来很舒服,但是不太适合项目,日历插件也是比较简单得东西,就随手写了一个。话不多说,先上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
})