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>

效果如图:在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐