這篇文章帶給大家的內容是關於簡單的微信小程式日曆元件的實現（附完整程式碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
最近在做微信小程式項目，其中涉及日曆。一直以來，遇到日曆，就是網路上隨便找個插件，這次心血來潮，想著自己去實現一下。這次不是封裝功能強大，健碩完美的組件，只是記錄一下，主體思路。更多功能還得根據專案需要，自己去挖掘、實現。 （大佬輕噴）
// 获取某年某月总共多少天
getDateLen(year, month) {
let actualMonth = month - 1;
let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
return timeDistance / (1000 * 60 * 60 * 24);
},// 获取某月1号是周几
getFirstDateWeek(year, month) {
return new Date(year, month - 1, 1).getDay()
},// 获取当月数据，返回数组
getCurrentArr(){
let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数
let currentMonthDateArr = [] // 定义空数组
if (currentMonthDateLen > 0) {
for (let i = 1; i <h4>很多時候，為了顯示完整，需要顯示上下月的殘餘資料。一般來說，日曆展示時，最大是7 X 6 = 42位，為啥是42位，呃，自己去想想吧。當月天數已知，上月殘餘天數，我們可以用當月1號是周幾來推斷出來，下個月殘餘天數，正好用42 - 當月天數 -上月殘餘。 </h4><pre class="brush:php;toolbar:false">// 上月 年、月
preMonth(year, month) {
if (month == 1) {
return {
year: --year,
month: 12
}
} else {
return {
year: year,
month: --month
}
}
},// 获取当月中，上月多余数据，返回数组
getPreArr(){
let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数）
let preMonthDateArr = [] // 定义空数组
if (preMonthDateLen > 0) {
let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月
let date = this.getDateLen(year, month) // 获取上月天数
for (let i = 0; i <pre class="brush:php;toolbar:false">// 下月 年、月
nextMonth(year, month) {
if (month == 12) {
return {
year: ++year,
month: 1
}
} else {
return {
year: year,
month: ++month
}
}
},// 获取当月中，下月多余数据，返回数组
getNextArr() {
let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数
let nextMonthDateArr = [] // 定义空数组
if (nextMonthDateLen > 0) {
for (let i = 1; i <h4>整合三組數據，就得到了完整的當月數據，格式如下</h4><pre class="brush:php;toolbar:false">[
{month: "pre", date: 30},
{month: "pre", date: 31},
{month: "current", date: 1},
{month: "current", date: 2},
...
{month: "current", date: 31},
{month: "next", date: 1},
{month: "next", date: 2}
]相關推薦：
以上是簡單的微信小程式日曆元件的實作（附完整程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
