需求：
日历需要平铺，支持月份切换，只能填写小于等于当天
上代码（Vue版）
HTML
<div class="work-log-calendar">
<van-icon name="arrow-left" class="icon-arrow-btn left" @click="arrowHandle('left')" />
<van-icon name="arrow" class="icon-arrow-btn right" @click="arrowHandle('right')" />
<van-calendar
row-height="40"
color="#1989fa"
:poppable="false"
:show-confirm="false"
:show-title="false"
:show-mark="true"
:min-date="minDate"
:max-date="maxDate"
:default-date="defaultDate"
:style="{ height: '320px' }"
:formatter="formatter"
@confirm="onConfirmHandle"
/>
</div>
CSS
.work-log-calendar
position relative
.icon-arrow-btn
position absolute
top 16px
.left
left 100px
.right
right 100px
JS
setMinMaxDay () {
let minYear = new Date(this.year, 1, 1).getFullYear()
let minMonth = new Date(this.year, 1, 1).getMonth()
let maxYear = new Date().getFullYear()
let maxMonth = new Date().getMonth() + 1
let nowYear = this.defaultDate.getFullYear()
let nowMonth = this.defaultDate.getMonth() + 1
if (maxYear === nowYear && nowMonth === maxMonth) {
const firstDay = new Date(this.defaultDate)
firstDay.setDate(1)
this.minDate = new Date(
nowYear,
nowMonth - 1,
firstDay.getDate()
)
var endDate = new Date(this.defaultDate)
endDate.setDate(new Date().getDate())
this.maxDate = new Date(
nowYear,
nowMonth - 1,
endDate.getDate()
)
} else if (nowYear === minYear) {
if (nowMonth === minMonth) {
const firstDay = new Date(this.year, 0, 1)
firstDay.setDate(1)
this.minDate = new Date(
nowYear,
nowMonth - 1,
firstDay.getDate()
)
const endDate = new Date(this.defaultDate)
endDate.setMonth(this.defaultDate.getMonth() + 1)
endDate.setDate(0)
this.maxDate = new Date(
nowYear,
nowMonth - 1,
endDate.getDate()
)
} else {
const firstDay = new Date(this.defaultDate)
firstDay.setDate(1)
this.minDate = new Date(
this.year,
this.month + this.cont,
firstDay.getDate()
)
const endDate = new Date(this.defaultDate)
endDate.setMonth(this.defaultDate.getMonth() + 1)
endDate.setDate(0)
this.maxDate = new Date(
this.year,
this.month + this.cont,
endDate.getDate()
)
}
}
},
arrowHandle (direction) {
let minYear = new Date(this.year, 0, 1).getFullYear()
let minMonth = new Date(this.year, 1, 1).getMonth()
let maxYear = new Date().getFullYear()
let maxMonth = new Date().getMonth()
let nowYear = this.defaultDate.getFullYear()
let nowMonth = direction === 'left' ? this.defaultDate.getMonth() + 1 : this.defaultDate.getMonth()
if (direction === 'left') {
if (nowYear > minYear) {
this.cont--
this.defaultDate = new Date(
this.year,
this.month + this.cont,
this.nowDay
)
}
if (nowYear === minYear) {
if (nowMonth > minMonth) {
this.cont--
this.defaultDate = new Date(
this.year,
this.month + this.cont,
this.nowDay
)
}
if (nowMonth === minMonth) {
this.cont = 0
this.year = this.year - 1
this.month = 11
this.defaultDate = new Date(
this.year,
this.month + this.cont,
this.nowDay
)
console.log(this.defaultDate.getFullYear(), new Date(2020, 11, 19), this.year)
}
}
} else {
if (nowYear < maxYear) {
this.year = maxYear
this.cont = 0
this.month = 0
this.defaultDate = new Date(
this.year,
this.month + this.cont,
this.nowDay
)
}
if (nowYear === maxYear) {
if (nowMonth < maxMonth) {
this.cont++
this.defaultDate = new Date(
this.year,
this.month + this.cont,
this.nowDay
)
}
}
}
this.setMinMaxDay()
