uniapp日期加减切换,点击切换

先上完成后的页面:当前年年份不显示,不然完整显示。

可以切换和自定义选择。

html:样式和图片自定义。

<view class="image-text_30">
            <image @click="delMonth" :src="require('@/static/home/zuo.png')" class="icon_4"></image>
            <text @click="selectMonth" lines="1" class="text-group_12">{{ currentYear == new Date().getFullYear() ? currentMonth : currentYear + '年' + currentMonth }}月</text>
            <image @click="addMonth" :src="require('@/static/home/you.png')" class="icon_5"></image>
</view>

      <u-datetime-picker
        :show="showDateTime"
        v-model="dateTime"
        @close="showDateTime = false"
        @cancel="showDateTime = false"
        @confirm="confirmDateTime"
        mode="year-month"
        closeOnClickOverlay
        :formatter="formatter"
      ></u-datetime-picker>

JavaScript:


    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      return value
    },
    confirmDateTime(time) {
      this.currentMonth = new Date(time.value).getMonth() + 1
      this.currentYear = new Date(time.value).getFullYear()
      this.showDateTime = false
      this.calendarDate = this.currentYear + '-' + this.currentMonth
    },

    delMonth() {
      if (this.currentMonth == 1) {
        this.currentMonth = 12
        this.currentYear -= 1
      } else {
        this.currentMonth -= 1
      }
      this.setTime(this.currentYear, this.currentMonth)
    },
    addMonth() {
      if (this.currentMonth == 12) {
        this.currentMonth = 1
        this.currentYear += 1
      } else {
        this.currentMonth += 1
      }
      this.setTime(this.currentYear, this.currentMonth)
    },
    setTime(year, month) {
      this.dateTime = Number(new Date(year, month - 1))
      this.currentMonth = new Date(year, month - 1).getMonth() + 1
      this.currentYear = new Date(year, month - 1).getFullYear()
      this.calendarDate = this.currentYear + '-' + this.currentMonth
    },

代码逻辑上面还是可以优化的。懒得弄了

其实没难度,但是个人简单记录下,逻辑放这里,下次需要可以再copy。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STL标准库与泛型编程(侯捷)笔记5

STL标准库与泛型编程&#xff08;侯捷&#xff09; 本文是学习笔记&#xff0c;仅供个人学习使用。如有侵权&#xff0c;请联系删除。 参考链接 Youbute: 侯捷-STL标准库与泛型编程 B站: 侯捷 - STL Github:STL源码剖析中源码 https://github.com/SilverMaple/STLSourceCo…

【JVM 基础】类字节码详解

JVM 基础 - 类字节码详解 多语言编译为字节码在JVM运行Java字节码文件Class文件的结构属性从一个例子开始反编译字节码文件字节码文件信息常量池方法表集合类名 再看两个示例分析try-catch-finallykotlin 函数扩展的实现 源代码通过编译器编译为字节码&#xff0c;再通过类加载…

安谋科技“周易”NPU与飞桨完成II级兼容性测试,助力实现多样化AI部署

近日&#xff0c;安谋科技&#xff08;中国&#xff09;有限公司&#xff08;以下简称“安谋科技”&#xff09;“周易”NPU系列IP与飞桨已完成II级兼容性测试&#xff0c;测试结果显示&#xff0c;双方兼容性表现良好&#xff0c;整体运行稳定。这是安谋科技加入“硬件生态共创…

SaaS 电商设计 (六) 实现 id 生成器本地化生产 (附源码)

一.背景 1.1 背景 业务背景: 目前梳理 SaaS 系统中存在以下几种 Id 生成的场景. 财务系统: 财务在生产财务单的时候,获取财务单 Id ,满足分布式场景下能够获取全局Id即可. 支付系统:订单系统在进行外部提单过程中,需要将生成的订单号与外部的支付平台做对接.在具体开发调试…

400μA低功率接地故障断路器控制芯片D4147,内置精密感应放大器与带隙基准,适用于GFCI和RCD

低功率接地故障断路器&#xff08;GFI&#xff09;控制芯片D4147主要用于三线制GFCI输出接口、GFCI芯片断路器、便携式GFCI线路等领域的产品&#xff0c;侦测并防护火线对地故障和零线对负载短路故障。 功能介绍 D4147为低功率接地故障断路器&#xff08;GFI&#xff09;控制…

Zookeeper 和 naocs的区别

Nacos 和 ZooKeeper 都是服务发现和配置管理的工具&#xff0c;它们的主要区别如下&#xff1a;功能特性&#xff1a;Nacos 比 ZooKeeper 更加强大&#xff0c;Nacos 支持服务发现、动态配置、流量管理、服务治理、分布式事务等功能&#xff0c;而 ZooKeeper 主要用于分布式协调…

RK3568驱动指南|第十篇 热插拔-第117章uevent_helper实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

python json模块

json是JavaScript对象表示法的缩写&#xff0c;是一种轻量级的数据交换格式&#xff0c;经常被用于Web应用程序中。python中的json库是用于解析和生成json数据格式的库。 import jsondata {"name": "张三","age": 18,"hobbies": [&q…

Unity报错:[SteamVR] Not Initialized (109)的解决方法

问题描述 使用HTC vive 头像进行SteamVR插件的示例场景进行测试&#xff0c;发现头显场景无法跳转到运行场景&#xff08;Unity 项目可以运行&#xff0c;仅出现警告&#xff09;。 具体如下&#xff1a; [SteamVR] Not Initialized (109) [SteamVR] Initialization failed…

python 基础知识点(蓝桥杯python科目个人复习计划20)

今日复习内容&#xff1a;基础算法中的选择排序/插入排序/快速排序/归并排序/桶排序 一.选择排序 1.算法步骤 从左往右找到最小的元素&#xff0c;放在起始位置重复上述步骤&#xff0c;依次找到第二&#xff0c;第三小的元素 2.具体描述 给定一个长度为n的列表&#xff0…

[VisualStudioCode]_[VSCODE]_[C/C++开发环境配置-问题解决和补充]

场景 在使用VSCode配置C的开发环境时《VisualStudioCode_C/C开发环境配置[1]》&#xff0c;编译时会发现找不到标准库的std::mutex和std::thread的声明&#xff0c;而这两个的头文件已经引入&#xff0c;什么情况&#xff1f; 无论如何MinGW都是Windows上验证开发C特性比较新的…

Python从入门到网络爬虫(控制语句详解)

前言 做任何事情都要遵循一定的原则。例如&#xff0c;到图书馆去借书&#xff0c;就需要有借书证&#xff0c;并且借书证不能过期&#xff0c;这两个条件缺一不可。程序设计亦是如此&#xff0c;需要使用流程控制实现与用户的交流&#xff0c;并根据用户需求决定程序“做什么…

运用AI搭建中间服务层(一)

知识点 适用于 AI 的 Visual Studio 工具 微软认知服务&#xff08;影像服务/实体搜索服务&#xff09;的使用 商业应用软件的架构设计 ASP.NET 核心 Web 应用程序 休息 应用程序接口 服务端的测试技术 软件工程中的需求演进处理 不断演进的应用场景 下面我们会用讲故…

PR-视频去水印

文章目录 前言PR-视频去水印实现示例 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实在白嫖的话&#xff0c;那欢迎常来啊!!! PR-视频…

Unity组件开发--短连接HTTP

1.网络请求管理器 using LitJson; using Cysharp.Threading.Tasks; using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Networking; using UnityEngine.Events;using System.Web; using System.Text; using Sy…

企业的 Android 移动设备管理 (MDM) 解决方案

移动设备管理可帮助您在不影响最终用户体验的情况下&#xff0c;通过无线方式管理和保护组织的移动设备群&#xff0c;现代 MDM 解决方案还可以控制 App、内容和安全性&#xff0c;因此员工可以毫无顾虑地在托管设备上工作。移动设备管理软件可有效管理个人设备上的公司空间。M…

刷题第十五天-存在重复元素Ⅲ

存在重复元素Ⅲ 题目要求 解题思路 主要使用滑动窗口方法&#xff0c;让滑动窗口代销固定为t。 本题最大的难点在于快速地找到滑动窗口内的最大值和最小值&#xff0c;以及删除指定元素。 如果遍历求滑动窗口内的最大值和最小值&#xff0c;时间复杂度是O&#xff08;K&#…

自动化测试框架搭建全过程

前段时间写了一系列自动化测试相关的文章&#xff0c;当然更多的是方法和解决问题的思路角度去阐述我的一些观点。这篇文章来聊聊新手如何从零到一落地实践接口自动化测试。 为什么要做接口测试 测试理念的演变 早些时候&#xff0c;软件研发交付流程大多遵循V型或W型的瀑布模…

vue 公众号开发,调用jssdk封装

vue 公众号开发&#xff0c;经常会使用到 转发朋友&#xff0c;朋友圈&#xff0c;调用扫一扫等功能&#xff0c;这时就要使用微信的 jssdk 微信jssdk传送门 1. 安装jssdk 插件 (jweixin-module) npm install jweixin-module --save 2. 封装方法 utils/jwx.js let jweixin…

Hello,World!

“Hello, world”的由来可以追溯到 The C Programming Language 。在这门编程语言中&#xff0c;它被用作第一个演示程序&#xff0c;向人们展示了在计算机屏幕上输出“Hello world”这行字符串的计算机程序。由于这个演示程序的简洁性和直观性&#xff0c;它成为了许多初学者学…