calendar文档
<template>
...
<Calendar :min-date="start" :max-date="end"
:title="null" :show-mark="false" :show-subtitle="false" :show-confirm="false" :show-title="true"
:poppable="false" :round="false" >
<template v-slot:title>
<div style="background-color: red;height: 100%;display: flex;align-items: center;justify-content: center;">
<span @click="preMonth" style="margin-right: 10px">上一月</span>
{{dateStr}}
<span @click="NextMonth" style="margin-left: 10px">下一月</span>
</div>
</template>
</Calendar>
...
</template>
<script>
import { Calendar } from 'vant';
export default {
components: {
Calendar
},
data(){
return{
...
dateStr:new Date().getFullYear()+"-"+(new Date().getMonth()+1),
start:new Date(new Date().getFullYear(), new Date().getMonth(),1),
end:new Date(new Date().getFullYear(), new Date().getMonth(),31),
...
}
},
methods:{
...
NextMonth(){
console.log("NextMonth")
// start:new Date(new Date().getFullYear(), new Date().getMonth(),1),
// end:new Date(new Date().getFullYear(), new Date().getMonth(),31),
let start = this.start
let end = this.end
this.start = new Date(start.getFullYear(), start.getMonth()+1,1)
this.end = new Date(end.getFullYear(), end.getMonth()+1,new Date(start.getFullYear(), start.getMonth()+1,0).getDate())
this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)
},
preMonth(){
console.log("preMonth")
let start = this.start
let end = this.end
this.start = new Date(start.getFullYear(), start.getMonth()-1,1)
this.end = new Date(end.getFullYear(), end.getMonth()-1,new Date(start.getFullYear(), start.getMonth()-1,0).getDate())
this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)
},
}
}
</script>
<style lang="less" scoped>
...
/deep/.van-calendar__month-title{
display: none;
}
</style>
效果如图: