vue vant Calendar日历定制

news2024/11/23 13:18:28

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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/719501.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Mongodb 对于Sort排序能够支持的最大内存限制查看和修改

报错&#xff1a; Executor error during find command: OperationFailed: Sort operation used more than the maximum 33554432 bytes of RAM. Add an index, or specify a smaller limit. MongoDB Server对于Sort排序能够支持的最大内存限制查看&#xff1a; [rootdata…

MySQL8.0 创建用户、配置用户权限、添加外网访问

MySQL8.0 创建用户、配置用户权限、添加外网访问 添加用户、外网访问 在MySQL 8.0中&#xff0c;root用户的外网访问权限默认是被禁止的。要修改root用户的外网访问权限&#xff0c;您需要进行以下步骤&#xff1a; 连接到MySQL服务器。您可以使用MySQL命令行客户端或其他数据…

1.mac M1 Java 开发环境的安装与配置

1.首先我们打开谷歌浏览器复制下面的网址安装jdk&#xff1a; Java Download | Java 7, Java 8, Java 11, Java 13, Java 15, Java 17, Java 19 - Linux, Windows and macOShttps://www.azul.com/downloads/?packagejdk#zulu 2.我们翻到最下面去选择我们需要的版本&#xff…

第三代互联网(Web3.0)

第三代互联网&#xff0c;也被称为Web3.0&#xff0c;是互联网发展的新阶段。Web3.0是指一种基于人工智能、区块链、物联网等技术的新一代互联网。相对于Web2.0&#xff0c;Web3.0的特点是更加分布式、去中心化、安全、隐私保护、智能化和可信任。 Web3.0的主要特点包括&#…

vue3插槽

匿名插槽 父组件 <template><h1>插槽</h1><A> 我是匿名插槽 </A> </template><script setup>import { ref } from vue;import A from ./A.vue; </script><style></style>子组件 <template><div>&l…

FastDDS 源码剖析:DDS部分 - typesDomainParticipant分析

目录 types分析 DomainParticipant分析 DomainParticipant的主要作用 DomainParticipant实现的一些关键原理&#xff1a; 源码剖析 types分析 位于src/cpp/dds中的types.cpp文件和位于include/dds/core中的types.hpp文件是FastDDS库的核心实现的一部分。 hpp文件是声明null…

【链表OJ】链表分割

⭐️ 往期相关文章 &#x1f4ab;链接1&#xff1a;链表中倒数第k个结点(快慢指针问题) &#x1f4ab;链接2&#xff1a;leetcode 876.链表的中间结点(快慢指针问题) &#x1f4ab;链接3&#xff1a;leetcode 206.反转链表 &#x1f4ab;链接4&#xff1a;leetcode 203.移除链…

[Golang实战] sql建表,不用外键,多个表之间如何建立起联系?

问题描述 下面是我的建表语句&#xff0c;在其中我并没有使用到外键&#xff0c;去关联三个表&#xff0c;但是我发现三个表中具有隐式的关联关系 create database library; use library; DROP TABLE IF EXISTS user;CREATE TABLE user(id bigint(20) NOT NULL AUTO_INCREMEN…

Java基础-多线程JUC-线程池和自定义线程池

1. 线程池 主要核心原理 不推荐Executors创建没有上线的线程池&#xff0c;建议使用自定义的线程池&#xff1b; Java工具类创建线程池&#xff1b; public class demo16 {public static void main(String[] args) {/*** public static ExecutorService newCachedThreadPoo1() …

一款打击感超强的动作游戏《流星蝴蝶剑》

文章目录 玩法介绍1.介绍2.按键操作3.流星蝴蝶剑各种武器招式秘籍 游戏优点游戏缺点游戏停服的原因游戏后续发展常见的的游戏道具1.四种水晶2.四种包子3.多种属性加成道具 《流星蝴蝶剑》的游戏打击感分析1.什么是游戏打击感2.影响游戏打击感的经典要素3.几个体现打击感的镜头动…

国产自研GPT大语言模型|实在智能TARS

目录 前言 TARS名字由来 实在智能 TARS 应用演示 大模型RPA 大模型IDP 最后 前言 Chat-GPT问世以来&#xff0c;国内外知名公司纷纷加入到大模型的研发行列中&#xff0c;2023年无疑成为大模型发展元年。百度、谷歌等科技巨头百家争鸣&#xff0c;新锐科技公司也不甘…

成为自动化测试的7种技能

目录 前言&#xff1a; 1.自动化测试员技能——编程语言 设计框架 2.自动化测试员技能–出色的手动测试技能 人眼就是一切 某些测试只能手动完成 自动化测试可能包含漏洞 某些方案不适用于自动化测试 您对整个问题都有个想法 3.自动化测试员技能–自动化工具专业知识…

【教你做直播产品】线上K歌软件开发技术选型

摘要 在线K歌软件的开发有许多技术难点&#xff0c;需考虑到音频录制和处理、实时音频传输和同步、音频压缩和解压缩、设备兼容性问题等技术难点外&#xff0c;此外&#xff0c;开发者还应关注音乐版权问题&#xff0c;确保开发的应用合规合法。 前言 前面写了几期关于直播 …

中小企业如何应用大数据?_光点科技

随着信息技术的快速发展&#xff0c;大数据已经成为当今商业世界中的热门话题。大数据不仅对大型企业有益&#xff0c;对中小企业同样具有巨大潜力。然而&#xff0c;很多中小企业对于如何应用大数据感到困惑。 首先&#xff0c;中小企业可以利用大数据来优化营销策略。大数据分…

AidLux+无人机——AI电力巡检新模式

近年来&#xff0c;航空、遥感、以及信息处理等技术迅速发展&#xff0c;使得无人机在电力巡检上逐渐应用开来。 无人机电力巡检作为新型电力巡检方式&#xff0c;不受地形地貌限制、便携易用且高效&#xff0c;能够极大程度降低传统巡检工作的风险和失误&#xff0c;提升工作…

<QT开发> QT开发工具-之-QT应用程序打包

&#xff1c;QT开发&#xff1e; QT开发工具-之-QT应用程序打包 一 前言 笔者为什么会写这篇文章呢&#xff1f;这是因为&#xff0c;笔者使用windows QT开发了一个测试工具。目的是通过TCP/IP测试其它应用程序。首先这个QT程序是笔者自己开发的&#xff0c;所以笔者的电脑当…

如何写出一份还OK的英文简历

大家好&#xff0c;其实对于SAP这个全球超过80%都会用的ERP软件&#xff0c;对于我们顾问而言&#xff0c;永远都有成长空间。 当你技术达到一定水平的时候&#xff0c;你会发现受语言限制更多。 比如国内项目做得差不多了&#xff0c;想尝试国外global项目&#xff1b;或是遇…

关于使用Ajax技术无法获取本地数据的问题

今天在学习Ajax技术时&#xff0c;在按照课程学习的过程中&#xff0c;发现在浏览器中无法获取显示本地文件中的数据。在网上搜索一番后发现&#xff0c;是因为直接在默认浏览器中直接打开HTML文件&#xff0c;而不是通过web服务器访问&#xff0c;会出现跨域请求会受到浏览器的…

C-Free 的最佳替代品 初学者的C/C++ IDE利器 小熊猫C++

IDE选择之困 对于一个C/C的初学者来说&#xff0c;一个好用的IDE会让你快速入门、爱上编程&#xff1b;相反&#xff0c;一个难用的IDE则会让人还没入门就放弃。不要跟我说vimmake&#xff0c;初学者哪里懂这个&#xff0c;windows都不一定玩的溜&#xff0c;玩linux会让人更…

《水经注地图服务》发布的影像数据在水经微图中调用

古人云&#xff1a;“工欲善其事&#xff0c;必先利其器。”意思是说&#xff1a;工匠想要使他的工作做好&#xff0c;一定要先让工具锋利&#xff0c;比如要做好一件事&#xff0c;准备工作非常重要。 语出《论语卫灵公》&#xff1a;子贡问为仁。子曰&#xff1a;“工欲善其…