微信小程序日历组件

这个日历采用小程序组件化开发，有兴趣的同学可以引用本组件（怎么引用不多赘述，自行去微信小程序开发api了解）

-------------------------------------------------------------------------wxml

<!--pages/components/calender.wxml-->

< view class= 'calender'>

< view class= 'operate'>

< text catchtap= 'reduce'>减少 </ text >

< text catchtap= "add">增加 </ text >

</ view >

< view class= 'year'>

< text >{{year}}年 </ text >

< text >{{currentMonth}}月 </ text >

</ view >

< view class= 'week'>

< block wx:for= "{{weekArr}}" wx:key= "{{index}}">

< text >{{item}} </ text >

</ block >

</ view >

< view class= 'date'>

< block wx:for= "{{dateArr}}" wx:key= "{{index}}">

< text >{{item-(weekNum-1)<=0?"":item-(weekNum-1)>yearMonth[currentMonth-1]?"":item-(weekNum-1)}} </ text >

</ block >

</ view >

</ view >

-------------------------------------js

// pages/components/calender.js

Component({

data:{

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

yearMonth:[],

rowNum: "",

dateArr:[],

currentMonth: "",

year: "",

weekNum: ""

},

created: function(){},

attached: function(){

let T = new Date()

this.setData({

currentMonth: T.getMonth() + 1,

year: T.getFullYear()

})

//判断闰年

let yeartype = ( this.data.year % 4 == 0) && ( this.data.year % 100 != 0 || this.data.year % 400 == 0)

if ( yeartype ){

this.setData({

yearMonth: [ 31, 29 , 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

})

} else{

this.setData({

yearMonth: [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

})

}

let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"

let weekStr = ""

this.setData({

weekNum: new Date(currentMonthDay).getDay(),

rowNum: Math.ceil(( this.data.yearMonth[ this.data.currentMonth] + new Date(currentMonthDay).getDay())/ 7)

})

for( let i= 0 ; i< this.data.rowNum ; i++ ){

for( let j = 0 ; j< 7 ; j++ ){

this.data.dateArr.push(i* 7+j)

}

}

this.setData({

dateArr: this.data.dateArr

})

},

methods:{

//获取下一个月份

add: function(){

this.triggerEvent( "addone")

this.setData({

dateArr: []

})

if ( this.data.currentMonth== 12 ){

this.setData({

currentMonth: 1,

year: this.data.year+ 1

})

} else{

this.setData({

currentMonth: this.data.currentMonth + 1

})

}

let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"

let weekStr = ""

this.setData({

weekNum: new Date(currentMonthDay).getDay(),

rowNum: Math.ceil(( this.data.yearMonth[ this.data.currentMonth- 1] + new Date(currentMonthDay).getDay()) / 7)

})

for ( let i = 0; i < this.data.rowNum; i++) {

for ( let j = 0; j < 7; j++) {

this.data.dateArr.push(i * 7 + j)

}

}

this.setData({

dateArr: this.data.dateArr

})

},

//获取上一个月份

reduce: function(){

this.triggerEvent( "reduceone")

this.setData({

dateArr:[]

})

if ( this.data.currentMonth == 1) {

this.setData({

currentMonth: 12,

year: this.data.year - 1

})

} else {

this.setData({

currentMonth: this.data.currentMonth - 1

})

}

let currentMonthDay = this.data.year + "-" + this.data.currentMonth + "-01"

let weekStr = ""

this.setData({

weekNum: new Date(currentMonthDay).getDay(),

rowNum: Math.ceil(( this.data.yearMonth[ this.data.currentMonth- 1] + new Date(currentMonthDay).getDay()) / 7)

})

for ( let i = 0; i < this.data.rowNum; i++) {

for ( let j = 0; j < 7; j++) {

this.data.dateArr.push(i * 7 + j)

}

}

this.setData({

dateArr: this.data.dateArr

})

console.log( this.data.dateArr)

}

}

})

--------------------------------------------wxss

/* pages/components/calender.wxss */

.operate{

width: 100%;

display: flex;

flex-direction: row;

justify-content: space-around;

font-size: 32 rpx;

color: #000;

padding-bottom: 40 rpx;

}

.year{

padding: 0 30%;

display: flex;

flex-direction: row;

justify-content: space-around;

font-size: 32 rpx;

color: #404040;

margin-bottom: 40 rpx;

}

.calender{

display: flex;

flex-direction: column;

padding: 0 4.5%;

width: 91%;

border-top: 1 rpx solid #eaeaea;

padding-top: 30 rpx;

color: #404040;

}

.calender .week{

display: flex;

flex-direction: row;

}

.calender .week text{

width: 14%;

text-align: center;

font-size: 26 rpx;

}

.calender .date text{

width: 14%;

display: inline-block;

text-align: center;

font-size: 26 rpx;

color: #000;

}