日历小程序C语言,小程序日历功能实现

前言：之前想过写一下小程序的日历功能练练手，只是确实有些懒没怎么动手，最近项目有这方面的需求就花了小半天的时间实现了一下，总的来说并不复杂。

先看下接入项目前的日历样式：

屏幕快照 2019-03-22 下午3.24.24.png

其中灰色日期为上月日期或下月日期的显示，黑色日期为所选择的当月日期，红色日期为选择的当天日期；

功能：根据筛选的日期显示当月的日期信息，可点击，若选择了上月或下月的日期则进行日历列表的数据刷新；

话不多数，上代码：

总共三个文件calendarClass.js、calendarClass.wxml、calendarClass.wxss

calendarClass.wxml:

{{calendarTitle}}

{{item}}

{{item.date}}

calendarClass.wxss:

.calendar-background {

font-size: 24rpx;

padding-top: 20rpx;

}

.calendar-item {

width: 14%;

height: 50rpx;

text-align: center;

}

.display-space-between {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

}

.text-gray {

color: #878787;

}

.text-red {

color: #F87474;

}

calendarClass.js(最重要的)：

Page({

/**

* 页面的初始数据

*/

data: {

weeks: ["日", "一", "二", "三", "四", "五", "六"],

// 所选择日期

selectDate: {

'year': new Date().getFullYear(),

'month': new Date().getMonth() + 1,

'date': new Date().getDate(),

},

calendarTitle: '',

// 日期list

calendarDays: []

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

this.getMonthDaysCurrent(new Date())

},

// 所选时间对应月份日期

getMonthDaysCurrent(e) {

let year = e.getFullYear()

let month = e.getMonth() + 1

let date = e.getDate()

let day = e.getDay() // 周几

let days = new Date(year, month, 0).getDate() //当月天数(即下个月0号=当月最后一天)

let firstDayDate = new Date(year, month - 1, 1) // 当月1号

let firstDay = firstDayDate.getDay() //当月1号对应的星期

let lastDate = new Date(year, month - 1, days) //当月最后一天日期

let lastDay = lastDate.getDay() //当月最后一天对应的星期

// 更新选择日期

this.data.selectDate = {

'year': year,

'month': month,

'date': date,

}

// 更新顶部显示日期

this.setData({

calendarTitle: year + "/" + (month > 9 ? month : "0" + month) + "/" + (date > 9 ? date : "0" + date)

})

let calendarDays = []

// 上个月显示的天数及日期

for (let i = firstDay - 1; i >= 0; i--) {

let date = new Date(year, month - 1, -i)

//console.log(date, date.getMonth() + 1)

calendarDays.push({

'year': date.getFullYear(),

'month': date.getMonth() + 1,

'date': date.getDate(),

'day': date.getDay(),

'current': false,

'selected': false

})

}

// 当月显示的日期

for (let i = 1; i <= days; i++) {

calendarDays.push({

'year': year,

'month': month,

'date': i,

'day': new Date(year, month - 1, i).getDay(),

'current': true,

'selected': i == date // 判断当前日期

})

}

// 下个月显示的天数及日期

for (let i = 1; i < 7 - lastDay; i++) {

let date = new Date(year, month, i)

//console.log(date, date.getMonth() + 1)

calendarDays.push({

'year': date.getFullYear(),

'month': date.getMonth() + 1,

'date': date.getDate(),

'day': date.getDay(),

'current': false,

'selected': false

})

}

this.setData({

calendarDays: calendarDays

})

},

// 手动选中日期

clickDate(e) {

let index = e.currentTarget.dataset.index

let list = this.data.calendarDays

for (let i = 0; i < list.length; i++) {

list[i].selected = i == index

if (i == index) {

console.log(list[i], this.data.selectDate)

// 如果选择日期不在当月范围内，则重新刷新日历数据

if (list[i].year != this.data.selectDate.year || list[i].month != this.data.selectDate.month) {

let date = new Date(list[i].year, list[i].month - 1, list[i].date)

this.getMonthDaysCurrent(date)

return

}

// 更新顶部显示日期

this.setData({

calendarTitle: list[i].year + "/" + (list[i].month > 9 ? list[i].month : "0" + list[i].month) + "/" + (list[i].date > 9 ? list[i].date : "0" + list[i].date)

})

}

}

this.setData({

calendarDays: list

})

},

})