今天就跟大家聊聊有關(guān)如何在微信小程序中使用日歷組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、阿拉善盟網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5開發(fā)、商城網(wǎng)站定制開發(fā)、集團公司官網(wǎng)建設、外貿(mào)營銷網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為阿拉善盟等各大城市提供網(wǎng)站開發(fā)制作服務。

wxml

減少
增加


{{year}}年
{{currentMonth}}月



{{item}}




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

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
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:0 30%;
display: flex;
flex-direction: row;
justify-content: space-around;
font-size:32rpx;
color:#404040;
margin-bottom: 40rpx;
}
.calender{
display: flex;
flex-direction: column;
padding:0 4.5%;
width:91%;
border-top:1rpx solid #eaeaea;
padding-top:30rpx;
color:#404040;
}
.calender .week{
display: flex;
flex-direction: row;
}
.calender .week text{
width:14%;
text-align: center;
font-size:26rpx;
}
.calender .date text{
width:14%;
display: inline-block;
text-align: center;
font-size:26rpx;
color:#000;
}
看完上述內(nèi)容，你們對如何在微信小程序中使用日歷組件有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
            
            
                        

            當前標題：如何在微信小程序中使用日歷組件            

            文章出自：http://weahome.cn/article/pidiej.html