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

news2024/11/24 13:29:17

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

可以切换和自定义选择。

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。

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

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

相关文章

最新消息:OpenAI GPT Store 正式上线,GPTs 应用商店来了!

原文链接 https://openaigptguide.com/gpt-store-and-chatgpt-team/ OpenAI推出的两款新产品和服务&#xff1a;GPT Store和ChatGPT Team&#xff0c;提供了许多全新的解决方案和功能&#xff0c;旨在帮助用户更轻松地使用和构建GPT工具&#xff0c;同时也增加了公司的收入来源…

VINS-MONO拓展2----更快地makeHessian矩阵(p_thread, OpenMP, CUDA, tbb)

1. 目标 完成大作业T2 作业提示&#xff1a; 多线程方法主要包括以下几种(参考博客)&#xff1a; MPI(多主机多线程开发),OpenMP(为单主机多线程开发而设计)SSE(主要增强CPU浮点运算的能力)CUDAStream processing, 之前已经了解过std::thread和pthread&#xff0c;拓展1…

Unity中URP下实现能量罩(交接处高亮)

文章目录 前言一、交接处高亮 原理1、 我们先用一个球作为能量罩、一个Cube 和 一个 椭球 作为与能量罩交接的物体2、 这是我们目前场景的深度图3、使能量罩为 半透明渲染队列 且 关闭深度写入 不渲染深度图 二、交接处高亮 实现1、得到深度图2、在片元着色器中&#xff0c;对深…

【Qt之Quick模块】8. Quick基础、布局管理、布局管理器

1. 前言 Qt Quick编程&#xff0c;提供了多种布局方式。 如&#xff0c;静态布局&#xff0c;可以使用组件的x、y属性进行设置&#xff0c;或者进行绑定。 还可以使用锚anchors进行布局。 此外&#xff0c;还可以使用定位器以及定位管理器为多组件进行布局。 但使用布局管理器…

OpenCV-20卷积操作

一、什么是图像卷积 图像卷积就是卷积在图像上按照滑动遍历像素时不断的相乘求和的过程。 绿色为图片&#xff0c; 黄色为卷积核&#xff0c; 粉色为最终得到的卷积特征。 二、步长 步长就是卷积核在图像上移动的步幅&#xff0c;每次移动一个方格则步幅为1。且一般为1。 若…

【hyperledger-fabric】搭建多机网络二进制安装部署Orderer节点

简介 根据b站教学视频去学习搭建多机网络二进制安装部署Orderer节点时遇到了一些问题&#xff0c;在这里对这些小问题进行处理。 问题描述以及解决方案 问题描述&#xff1a;日志报错信息Failed pulling the last config block: retry attempts exhausted channelfabric-cha…

计算机组成原理之计算机硬件发展和计算机系统的组成

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

1.11寒假集训

A: 解题思路&#xff1a; 这题看示例不难发现&#xff0c;答案就是a * b的每一项的和&#xff0c;例如111 111就是111*&#xff08;1 1 1&#xff09; 333,知道后此题就迎刃而解了 下面是c代码&#xff1a; #include<iostream> using namespace std; int main() {in…

Cesium 实战 - 模型亮度调整,自定义着色器(CustomShader)完美解决模型太暗的问题

Cesium 实战 - 自定义视频标签展示视频 模型变暗问题以往通过光线解决问题模型变暗原理解决问题完整代码在线示例在 Cesium 项目中,添加模型是比较基础的功能,Cesium 支持 glTF(GBL) 格式。 在实际应用中,经常会遇到模型特别暗的情况,对比而言,其他三维环境添加是正常的…

Vs2019安装教程

1、下载链接&#xff1a;Visual Studio 较旧的下载 - 2019、2017、2015 和以前的版本 (microsoft.com)https://visualstudio.microsoft.com/zh-hans/vs/older-downloads/2、下载 而后跟进安装&#xff1a;&#xff08;虽然这是2022的&#xff0c;但是和2022和2019基本差不多&am…

【C++】C++11中的常见语法(上)

C11 一、C11简介二、统一的列表初始化1.&#xff5b;&#xff5d;初始化2. std::initializer_list 三、声明1. auto2. decltype3. nullptr 四、右值引用和移动语义1. 左值引用和右值引用2. 左值引用与右值引用比较3. 右值引用使用场景和意义4. 右值引用引用左值及其一些更深入的…

Java基于云计算的云HIS源码 云部署模式,可支持多家医院共同使用

Java基于云计算技术的B/S架构医院信息管理系统(简称云HIS)&#xff0c;采用前后端分离架构&#xff0c;前端由Angular、JavaScript开发&#xff1b;后端使用Java语言开发。功能包括门诊、住院、收费、电子病历、药品药房、药库、财务、统计等模块&#xff0c;支持医保接口。系统…

科技创新领航 ,安川运动控制器为工业自动化赋能助力

迈入工业4.0时代&#xff0c;工业自动化的不断发展&#xff0c;让高精度运动控制成为制造业高质量发展的重要技术手段。北京北成新控伺服技术有限公司作为一家集工业自动化产品销售、系统设计、开发、服务于一体的高新技术企业&#xff0c;其引进推出的运动控制产品一直以卓越的…

【rk3568】01-环境搭建

文章目录 1.开发板介绍1.1相关资源&#xff1a;1.2接口布局1.3屏幕1.4核心板引脚可复用资源 2.环境搭建2.1安装依赖包2.2git配置2.3安装sdk2.4sdk介绍2.5sdk编译 3.镜像介绍 1.开发板介绍 开发板&#xff1a;atk-rk3568开发板 eMMC&#xff1a;64G LPDDR4&#xff1a;4G 显示屏…

【数据结构】——期末复习题题库(8)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

RTK及其相关概念扫盲

RTK 载波相位 载波相位测量是一种精确的距离测量技术&#xff0c;常用于全球定位系统&#xff08;GPS&#xff09;和其他卫星导航系统。这种方法的基本原理涉及以下几个关键步骤&#xff1a; 载波信号的发射与接收&#xff1a;载波信号是一种高频的电磁波&#xff0c;由卫星发…

如何上传苹果ipa安装包?

目录 引言 摘要 第二步&#xff1a;打开appuploader工具 第二步&#xff1a;打开appuploader工具&#xff0c;第二步&#xff1a;打开appuploader工具 第五步&#xff1a;交付应用程序&#xff0c;在iTunes Connect中查看应用程序 总结 引言 在将应用程序上架到苹果应用…

什么牌子护眼灯好,防蓝光?安利防蓝光好用的护眼台灯

在我们小时候&#xff0c;并没有护眼灯这一概念&#xff0c;写作业的主要光源还是家中的白炽灯&#xff0c;有条件的会在桌上摆个台灯&#xff0c;但室内环境仍显得比较昏暗。如今的孩子学习环境相比我们小时候有了很大升级&#xff0c;家长对视力健康也更重视&#xff0c;护眼…

操作系统导论-课后作业-ch5

关于man的使用 man 系统参考手册 man n name 在系统手册第n章查看name1. 代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <unistd.h> #include <sys/wait.h>int main() {int x 100;int rc fork();if (rc -1) {fprintf…

微信/QQ/百度网盘/QQ邮箱上传附件/网络上传文件很慢怎么办?

文章目录 前言解决 前言 继上一次遇到这个问题没几天&#xff0c;期间也断断续续遇到过一点 以为还是因为硬件原因&#xff0c;再一次进行长按关机键放静电&#xff0c;但是这次就没有效果了&#xff0c;上传还是超级慢。 此时我就以为我的电脑坏了&#xff0c;差点拿去修 直到…