uniapp自定义的日历(纯手写)

效果图:

html:

<!-- 年月 -->
		<view class="box">
			<view class="box_time">
				<view class="time">
					<image @click="lefts" :src="url+'/uploads/20231206/9d1fb520b12383960dca3c214d84fa0a.png'" mode="">
					</image>
					<text>{{year}}年{{month}}月</text>
					<image @click="right" :src="url+'/uploads/20231206/c2f706c19e0de31b2139939c3cb089e4.png'" mode="">
					</image>
				</view>
			</view>
		</view>
		<!-- 周 -->
		<view class="box_week">
			<view class="week">
				<text v-for="(item,index) in week" :key="index">{{item}}</text>
			</view>
		</view>
		<!-- 日期 -->
		<view class="date">
			<view class="date_list">
				<view class="dates" v-for="(item,index) in day" :key="index">
					<view
						:class="item.num == sun ? 'list_yes' : (month > months ? 'list_null' :(year > years ? 'list_null' :(month == months && year == years && item.num > san ? 'list_null' :'list')))"
						@click="click(item)" :style="item.day  > 7 && !more_status ? 'display:none;':''">
						<!-- <view class="list"> -->
						<text>{{item.day}}</text>
						<view
							:class="item.status ? 'bars' : (item.num > san ? '' : (month > months ? '' :(year > years ? '' :(month == months && year == years && item.num > san ? '' :'bar'))))">
							<p></p>
						</view>
					</view>
				</view>
			</view>
		</view>

参数描述:

day:获取每个月有几天

js:

year: '', //现在的年份  会变
years: '', //现在的年份不  会变
month: '', //现在的月份  会变
months: '', //现在的月份  不会变
day: '', //指定年月的天数
sun: '', //今天的日
week: '', //指定日期的第一天的星期几
more_status: false, //是否展开更多
date: '', //现在的时分秒
onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let myDate = new Date();
			this.year = myDate.getFullYear();
			this.years = myDate.getFullYear();
			this.month = String(myDate.getMonth() + 1).padStart(2, '0');
			this.months = String(myDate.getMonth() + 1).padStart(2, '0');
			this.week = this.getweekday(this.year + '-' + this.month + '-' + '01')
			this.getMonthDays2()
			this.sun = String(myDate.getDate()).padStart(2, '0');
			this.san = String(myDate.getDate()).padStart(2, '0');
			let h = myDate.getHours(); //小时
			let m = myDate.getMinutes(); //分钟
			let s = myDate.getSeconds(); //秒
			this.date = h + ':' + m + ':' + s //时分秒
		},
// 获取指定年月份的天数
			getMonthDays2() {
				let time = this.year + '-' + this.month
				let year = time.split('-')[0];
				let month = time.split('-')[1];
				let date = new Date(year, month, 0); // 这里的month,比我们日常说的几 月份小1,10则表示11月份
				let ti = date.getDate()
				let array = []
				for (let i = 0; i < ti; i++) {
					array.push({
						day: i + 1,
						num: String(i + 1).padStart(2, '0')
					})
				}
				this.day = array;
			},
getweekday(date) {
				var weekArray = new Array("7", "1", "2", "3", "4", "5", "6");

				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				let array = []
				for (let i = 0; i < 7; i++) {
					let time = Number(week) + i
					if (time > 7) {
						time = time - 7
					}
					if (time == 1) time = '一'
					if (time == 2) time = '二'
					if (time == 3) time = '三'
					if (time == 4) time = '四'
					if (time == 5) time = '五'
					if (time == 6) time = '六'
					if (time == 7) time = '日'
					array.push(time)
				}
				return array;
			},

自行研究

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

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

相关文章

三. LiDAR和Camera融合的BEV感知算法-融合算法的基本介绍

目录 前言0. 简述1. 融合背景2. 融合思路3. 融合性能优劣总结下载链接参考 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习下课程第三章——LiDAR和Camera融合的BEV感知算法&am…

数据分析基础之《numpy(2)—ndarray属性》

一、ndarray的属性 1、属性方法 属性名字属性解释ndarray.shape数组维度的元组&#xff08;形状&#xff09;ndarray.ndim数组维数ndarray.size数组中的元素数量ndarray.itemsize一个数组元素的长度&#xff08;字节&#xff09;ndarray.dtype数组元素的类型使用方法 数组名.…

List 接口

1 List 接口 java.util 中的集合类包含 Java 中某些最常用的类。最常用的集合类是 List 和 Map。 List是一种常用的集合类型&#xff0c;它可以存储任意类型的对象&#xff0c;也可以结合泛型来存储具体的类型对象&#xff0c;本质上就是一个容器。 1.1 List 类型介绍 有序性…

JVM进程缓存

引言 缓存在日常开发中启动至关重要的作用&#xff0c;由于是存储在内存中&#xff0c;数据的读取速度是非常快的&#xff0c;能大量减少对数据库的访问&#xff0c;减少数据库的压力。我们把缓存分为两类&#xff1a; 分布式缓存&#xff0c;例如Redis&#xff1a; 优点&…

Jmeter 请求签名api接口-BeanShell

Jmeter 请求签名api接口-BeanShell 项目签名说明编译扩展jar包jmeter 使用 BeanShell 调用jar包中的签名方法 项目签名说明 有签名算法的api接口本地不好测试&#xff0c;使用BeanShell 扩展jar 包对参数进行签名&#xff0c;接口签名算法使用 sha512Hex 算法。签名的说明如下…

web,Apache简述

一.HTTP请求访问的完整过程 1.建立连接 2.接收请求 3.处理请求 4.访问资源 服务器获取请求报文中请求的资源web服务器&#xff0c;即存放了web资源的服务器&#xff0c;负责向请求者提供对方请求的静态资源&#xff0c;或动态运行后生成的资源 静态资源&#xff1a;不需要…

IDEA 中文乱码解决方案

我的电脑Window11默认编码是UTF-8 1. console控制台乱码 修改IDEA目录下bin/idea64.exe.vmoptions文件&#xff0c;在文件结尾添加-Dfile.encodingUTF-8&#xff1b;保险起见&#xff0c;再修改下idea配置Help ->Edit Custom VM Options&#xff0c;同样是在文件结尾添加-D…

Spring Cloud Gateway + Nacos + LoadBalancer实现企业级网关

1. Spring Cloud Gateway 整合Nacos、LoadBalancer 实现企业级网关 前置工作&#xff1a; 创建 SpringBoot 多模块项目创建网关&#xff08;gateway-service&#xff09;、用户&#xff08;user-service&#xff09;模块用户模块添加 Nacos discovery 支持以及 Spring Web&am…

堆的基础功能实现和优先级队列

1. 堆的插入与删除 1.1 堆的插入 步骤&#xff1a; 1、先将元素放入到底层空间中(注意&#xff1a;一般是放到整个二叉树的最后一个叶子节点的后边&#xff0c;其次存储空间不够时需要扩容) 2、将最后新插入的节点向上调整&#xff0c;直到满足堆的性质&#xff08;判断该节点…

30 张图解 HTTP 常见的面试题

前言 在面试过程中&#xff0c;HTTP 被提问的概率还是比较高的 我搜集了 5 大类 HTTP 面试常问的题目&#xff0c;同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大的&#xff0c;通过问答 图解的形式由浅入深的方式帮助大家进一步的学习和理解 HTTP 协议。 HTTP 基本概…

【数学建模】《实战数学建模:例题与讲解》第十讲-时间序列预测(含Matlab代码)

【数学建模】《实战数学建模&#xff1a;例题与讲解》第十讲-时间序列预测&#xff08;含Matlab代码&#xff09; 基本概念移动平均&#xff08;Moving Average, MA&#xff09;:指数平滑法&#xff08;Exponential Smoothing&#xff09;:季节性调整&#xff08;Seasonal Adju…

Anaconda安装

1.Anaconda下载路径 官网最新版本&#xff1a;https://www.anaconda.com/products/distribution/ 官网历史版本&#xff1a;https://repo.anaconda.com/archive/ 清华大学开源软件镜像站&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 2.和python版本关系…

GD32F30X-RT-Thread学习-线程管理

1. 软硬件平台 GD32F307E-START Board开发板MDK-ARM Keil 2.RT-Thread Nano 3.RT-Thread 内核学习-线程管理 ​ 在多线程操作系统中&#xff0c;可以把一个复杂的应用分解成多个小的、可调度的、序列化的程序单元&#xff0c;当合理地划分任务并正确地执行时&#xff0c;这…

Java JVM类加载机制原理剖析

目录 前言一、什么是类加载二、类加载子系统三、类的加载过程2.1、加载2.2、验证2.3、准备2.4、解析2.5、初始化 四、类加载器(ClassLoader) 前言 Java类要加载到JVM中的&#xff0c;会经过一系列的加载过程&#xff0c;这个过程就是在类加载子系统中实现的&#xff0c;当我们用…

函数栈帧的创建和销毁

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 1. 什么是函数栈帧 2. 理解函数栈帧能解决什么问题呢&#xff1f; 3. 函数栈帧的创建和销毁解析 3.1 什么是栈&#xff1f; 3.2 认识相关寄存器和汇编指令 3.3…

【深度学习】注意力机制(一)

本文介绍一些注意力机制的实现&#xff0c;包括SE/ECA/GE/A2-Net/GC/CBAM。 目录 一、SE&#xff08;Squeeze-and-Excitation&#xff09; 二、ECA&#xff08;Efficient Channel Attention&#xff09; 三、GE&#xff08;Gather-Excite&#xff09; 四、A2-Net(Double A…

USB基础知识点介绍

本文主要介绍USB2.0相关的知识点。 USB 2.0介绍 USB 2.0是一种通用串行总线&#xff08;Universal Serial Bus&#xff09;的接口标准&#xff0c;是USB&#xff08;Universal Serial Bus&#xff09;技术的第二代版本。它于2000年4月发布&#xff0c;是USB 1.1的升级版本。 …

交易历史记录20231208 记录

昨日回顾&#xff1a; SELECT TOP 10000 CODE,成交额排名,净流入排名,代码,名称,DDE大单金额,涨幅,所属行业,主力净额,DDE大单净量,CONVERT(DATETIME, 最后涨停时间, 120) AS 最后涨停时间 FROM dbo.全部&#xff21;股20231208_ALL WHERE 连板天 > 1AND DDE大单净量 > …

通信:mqtt学习网址

看这个网址&#xff1a;讲的很详细&#xff0c;后面补实战例子 第一章 - MQTT介绍 MQTT协议中文版 (gitbooks.io)https://mcxiaoke.gitbooks.io/mqtt-cn/content/mqtt/01-Introduction.html

3.DevEco Studio安装鸿蒙手机app本地模拟器

配合Intel CPU启动模拟器 解决措施 打开任务管理器&#xff0c;在“性能”选项&#xff0c;检查CPU虚拟化是否已经启用。如果未启用&#xff0c;需要进入电脑的BIOS中&#xff0c;将CPU的“Intel Virtualization Technology”选项开启。 点击New Emulator 文档中心 解决措施…