頁面代碼
<div class="f2">
<div class="ititle">
<div class="im" @click="plusMonth()">
<img src="static/images/icon/sileft.png"/>
</div>
<div class="title">{{nowMonth}}</div>
<div class="im1" @click="addMonth()">
<img src="static/images/icon/siright.png"/>
</div>
</div>
<div class="week">
<div class="weeekRes">
<div class="weekResT1" v-for="(item,index) in days" :key="index">
<div class="weekResti1"><span>{{item.week}}</span></div>
</div>
<div class="weekResT2" v-for="(item,index) in list" :key="index">
<div :class="['orderYuan']">
<span :class="['orderYuanTT',{'cirTT':item.sign},{'y':!item.inMonth}]">{{item.name}}</span>
</div>
</div>
</div>
</div>
<div>
js代碼
通過moment庫的一些事件方法實現(xiàn),首先獲取到今天是周幾,然后通過這個周幾來算出這個月的日歷要顯示上個月的幾天,最后通過add方法,把這個月的天數(shù)和下個月的天數(shù)補齊即可,
getCal() {
let monthOffset = this.monthOffset
let nowMonth = moment().add(monthOffset, 'month').format('YYYY-MM') + '-01'
//當前選擇的年月(獲取到1號)
let list = []
//算出周幾
let vWeekOfDay = moment(nowMonth).format('E') //算出這周的周幾
if (vWeekOfDay == 7) {
vWeekOfDay = 0
}
//獲取這個月的日歷需要補滿上個月的幾天
let left = vWeekOfDay
for (let i = vWeekOfDay; i > 0; i--) {
//10-1往前減
let xdate = moment(nowMonth).subtract(i, 'days')
console.log(xdate)
let xname = xdate.format('D')
console.log(xname)
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'), sign: false
})
}
if (this.exceed) {
//遍歷出一個月的日歷顯示的總天數(shù)減去上個月需要顯示的天數(shù)剩余的所有天數(shù)
//比如這個月的日歷需要顯示5天上個月的日子,
//那就用42減去5.得到剩下要顯示的天數(shù),
//剩下37,也就是說除了這個月的30天之外,
//還會額外顯示下個月的7天,
//add方法返回的就是從這個moment(nowMonth)開始,
//后面的第i天的號數(shù),比如返回的是15,意思就是下個月的15號,
for (let i = 0; i < 42 - vWeekOfDay; i++) {
let xdate = moment(nowMonth).add(i, 'days')
let xname = xdate.format('D')
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'),
sign: false
})
}
} else {
//7-少了幾個
for (let i = 0; i < 7 - vWeekOfDay; i++) {
let xdate = moment(nowMonth).add(i, 'days')
let xname = xdate.format('D')
list.push({
name: xname,
date: xdate.format('YYYY-MM-DD'),
sign: false
})
}
}
this.list = list
let that = this
this.list.forEach(item => {
item.inMonth = that.isInMoth(item.date)
})
// this.getSigned()
},
isInMoth(date) {
let tmonth = moment(date).format('YYYY年MM月')
if (tmonth == this.nowMonth) {
return true
}
return false
},
plusMonth() {
let monthOffset = this.monthOffset
monthOffset = monthOffset - 1
let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
this.monthOffset = monthOffset
this.nowMonth = nowMonth
this.getCal()
},
addMonth() {
let monthOffset = this.monthOffset
monthOffset = monthOffset + 1
let nowMonth = moment().add(monthOffset, 'month').format('YYYY年MM月')
this.monthOffset = monthOffset
this.nowMonth = nowMonth
this.getCal()
},
}
//計算周幾
let wk = new Date().getDay()
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let week = weeks[wk]
//getDay方法返回的數(shù)字當作下標,就可以得到今天是周幾
。。。