vue vant Calendar日历定制

news/2024/10/18 2:26:40/

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.startlet end =  this.endthis.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.startlet end =  this.endthis.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>

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


http://www.ppmy.cn/news/735037.html

相关文章

QTTCP客户端服务端通信

目录 网络模块介绍 TCP介绍 TCP 服务端应用实例 TCP 客户端应用实例 运行结果&#xff1a; 网络模块介绍 Qt 网络模块为我们提供了编写 TCP / IP 客户端和服务器的类。它提供了较低级别的类&#xff0c;例 如代表低级网络概念的 QTcpSocket &#xff0c; QTcpServer 和 …

广西柳州电信 华为HG8120C光猫超级密码

UserName"telecomadmin" Password"telecomadmin52401790"

求助华为HG8321R光猫这样还有救吗

刷机失败后&#xff0c;网线连不上&#xff0c;只有电源灯亮&#xff0c;用ttl线连上一直这样循环&#xff0c;无法输入命令行 华为HG8321R刷机失败

华为HG8204 光纤猫的路由设置

原来安装光纤猫时&#xff0c;因为卡在路由设置那里&#xff0c;搞了好长时间&#xff0c;参考了网上提供的步骤&#xff0c;感觉一个字——乱&#xff01;还是自己写一篇供大家参考。 光纤的速度一般的比双绞线的网速快&#xff0c;但是想要多个人使用&#xff0c;就要另外连…

破解电信光猫华为HG8120C关闭路由功能方法

昨天电信的工作人员来安装了电信的光纤宽带&#xff0c;使用的是华为HG8120C这款光电转换器与路由器一体机 这导致下级路由无法直接使用PPPOE拨号连接到互联网&#xff0c;且无法使用端口映射来实现外网访问 而华为开放给用户的useradmin这个账号基本就是给你看着玩的&#xff…

华为HG8240F光猫破解

家里光猫被联通改了管理员的密码&#xff0c;尝试恢复出厂&#xff0c;但是只要注册上就被改&#xff0c;而且telnet什么的也都没有。没有管理员账号&#xff0c;IPTV等的vlan id也看不到&#xff0c;改完只能上网。 想了个办法&#xff0c;再找一个光猫&#xff0c;配置上网&…

华为hg8240光猫破解方法

要知道这台光猫的本质是一台迷你型的电脑&#xff0c;有自己的CPU&#xff0c;存储器之类 当然也有自己的系统&#xff0c;精简版的linux。 知道了这个接下来就好做了。 第一步把你的电脑用网线接到光猫的任意LAN口上。 点击开始菜单&#xff0c;在运行框中输入cmd 第二步&…

破解电信光猫华为HG8120C

昨天电信的工作人员来安装了电信的光纤宽带&#xff0c;使用的是华为HG8120C这款光电转换器与路由器一体机 这导致下级路由无法直接使用PPPOE拨号连接到互联网&#xff0c;且无法使用端口映射来实现外网访问 而华为开放给用户的useradmin这个账号基本就是给你看着玩的&#x…