如何在微信小程序中使用日历组件

今天就跟大家聊聊有关如何在微信小程序中使用日历组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

wxml

<!--pages/components/calender.wxml-->
<viewclass='calender'>
<viewclass='operate'>
<textcatchtap='reduce'>减少</text>
<textcatchtap="add">增加</text>
</view>
<viewclass='year'>
<text>{{year}}年</text>
<text>{{currentMonth}}月</text>
</view>
<viewclass='week'>
<blockwx:for="{{weekArr}}"wx:key="{{index}}">
<text>{{item}}</text>
</block>
</view>
<viewclass='date'>
<blockwx: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(){
letT=newDate()
this.setData({
currentMonth:T.getMonth()+1,
year:T.getFullYear()
})
//判断闰年
letyeartype=(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]
})
}
letcurrentMonthDay=this.data.year+"-"+this.data.currentMonth+"-01"
letweekStr=""
this.setData({
weekNum:newDate(currentMonthDay).getDay(),
rowNum:Math.ceil((this.data.yearMonth[this.data.currentMonth]+newDate(currentMonthDay).getDay())/7)
})
for(leti=0;i<this.data.rowNum;i++){
for(letj=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
})
}
letcurrentMonthDay=this.data.year+"-"+this.data.currentMonth+"-01"
letweekStr=""
this.setData({
weekNum:newDate(currentMonthDay).getDay(),
rowNum:Math.ceil((this.data.yearMonth[this.data.currentMonth-1]+newDate(currentMonthDay).getDay())/7)
})
for(leti=0;i<this.data.rowNum;i++){
for(letj=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
})
}
letcurrentMonthDay=this.data.year+"-"+this.data.currentMonth+"-01"
letweekStr=""
this.setData({
weekNum:newDate(currentMonthDay).getDay(),
rowNum:Math.ceil((this.data.yearMonth[this.data.currentMonth-1]+newDate(currentMonthDay).getDay())/7)
})
for(leti=0;i<this.data.rowNum;i++){
for(letj=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:32rpx;
color:#000;
padding-bottom:40rpx;
}
.year{
padding:030%;
display:flex;
flex-direction:row;
justify-content:space-around;
font-size:32rpx;
color:#404040;
margin-bottom:40rpx;
}
.calender{
display:flex;
flex-direction:column;
padding:04.5%;
width:91%;
border-top:1rpxsolid#eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender.week{
display:flex;
flex-direction:row;
}
.calender.weektext{
width:14%;
text-align:center;
font-size:26rpx;
}
.calender.datetext{
width:14%;
display:inline-block;
text-align:center;
font-size:26rpx;
color:#000;
}

看完上述内容，你们对如何在微信小程序中使用日历组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注恰卡编程网行业资讯频道，感谢大家的支持。