vue vant Calendar日历定制

最新推荐文章于 2024-08-09 07:46:44 发布

绿叶清风

最新推荐文章于 2024-08-09 07:46:44 发布

阅读量1.1k

点赞数 2

分类专栏： vant vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/pz0605/article/details/131537041

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vant

2 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在Vue.js应用中使用Vant的Calendar组件来创建一个可定制的日历，包括设置最小和最大日期，显示月份切换按钮，以及处理日期范围。日历标题可自定义，并隐藏了默认标记、副标题和确认按钮。

摘要由CSDN通过智能技术生成

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>