uniapp Vue3 日历 可签到 跳转

 上干货

<template>
	<view class="zong">
		<view>
			<view class="top">
				<!-- 上个月 -->
				<view class="sgy" @click="sgy">◀</view>
				<view class="nianyue">
					{{ year }}年{{ month + 1 }}月
				</view>
				<!-- 下个月 -->
				<view class="xgy" @click="xgy">▶</view>
				<view class="tzjinri" @click="tzjinri">
					今日
				</view>
			</view>
		</view>
		<!-- 周期 -->
		<view class="days">
			<view class="dayss" v-for="(item,index) in days" :key="index">
				{{item.week}}
			</view>
		</view>
		<!-- 天数 -->
		<view class="tian">
			<view style="color: grey;" class="tians" v-for="(itemm,indexx) in qnumbers" :key="indexx"
				@click="qdianjitian(year , month , itemm)">
				{{itemm}}
			</view>
			<view class="tians" v-for="(item,index) in numbers" :key="index"
				:class="{ 'highlight': item === day && pdjr === true }" @click="dianjitian(year , month + 1 , item)">
				{{item}}
				<text v-if="item === day && pdjr === true" class="jinriziyang">今日</text>

				<text v-if="dianjizhi.includes(JSON.stringify(year)+JSON.stringify(month + 1) + JSON.stringify(item) )"
					class="qiandaozhi">已签</text>
			</view>
			<view style="color: grey;" class="tians" v-for="(itemmm,indexxx) in houmianbuqi" :key="indexxx"
				@click="hdianjitian(year , month + 1 , itemmm)">
				{{itemmm}}
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		ref,
		watch
	} from "vue";
	// 获取当前年月日
	const currentDate = new Date();
	// 获取当前年
	const year = ref(currentDate.getFullYear());
	// 获取当前月
	const month = ref(currentDate.getMonth());
	// 获取当前日
	const day = ref(currentDate.getDate());
	// 当天年月日
	const teday = ref()
	// 判断是否是今日
	const pdjr = ref(false)
	// 获取当前周期
	const week = ref(currentDate.getDay())
	// 获取当前月的总天数
	const totalDaysInMonth = ref();
	// 当前月的整体天数
	const numbers = ref([]);
	// 当前月的1号是星期几
	const weekdate = ref()
	// 当月前的空数据
	const qnullnumber = ref()
	// 当月后面补齐的差的数据
	const hnullnumber = ref()
	// 前一个月的数据
	const qnumber = ref()
	// 前一个月补充的天数
	const qnumbers = ref()
	// 补充到后面的数据
	const houmianbuqi = ref()
	// 被点击后赋值 进行签到
	const dianjizhi = ref([])
	// 是否已签到
	const yiqiandao = ref()

	// 周期
	const days = ref([{
			id: 0,
			week: '日'
		},
		{
			id: 1,
			week: '一'
		},
		{
			id: 2,
			week: '二'
		},
		{
			id: 3,
			week: '三'
		},
		{
			id: 4,
			week: '四'
		},
		{
			id: 5,
			week: '五'
		},
		{
			id: 6,
			week: '六'
		},
	])
	// 程序加载完获取当日日期
	onMounted(() => {
		huoqu()
	})
	// 上个月
	function sgy() {
		// 如果月数小于1那就恢复到12月
		if (month.value <= 0) {
			month.value = 11
			year.value = year.value - 1
		} else {
			month.value = month.value - 1
			// console.log("上个月", month.value)
		}
		huoqu()
	}
	// 下个月
	function xgy() {
		// 如果月数大于12那就恢复到1月
		if (month.value >= 11) {
			month.value = 0
			year.value = year.value + 1
		} else {
			month.value = month.value + 1
			// console.log("下个月", month.value)
		}
		huoqu()
	}
	// 跳转到当日
	function tzjinri() {
		// 获取当前年月日
		const jcurrentDate = new Date();
		// 获取当前年
		year.value = jcurrentDate.getFullYear();
		// 获取当前月
		month.value = jcurrentDate.getMonth();
		// 获取当前日
		day.value = jcurrentDate.getDate();
		huoqu()
	}


	// 点击天数
	function dianjitian(iyear, imouth, item) {

		const Y = JSON.stringify(iyear)
		const M = JSON.stringify(imouth)
		const D = JSON.stringify(item)
		const iqriqi = Y + M + D
		yiqiandao.value = iqriqi
		console.log("点击天数", yiqiandao.value)
		if (dianjizhi.value.includes(iqriqi)) {
			// 如果已点击,则取消点击状态
			dianjizhi.value = dianjizhi.value.filter(i => i !== iqriqi);
			console.log('55', dianjizhi.value)
		} else {
			// 如果未点击,则添加点击状态
			dianjizhi.value.push(iqriqi);
			dianjizhi.value = Array.from(new Set(dianjizhi.value));
			console.log('44', dianjizhi.value)
		}
	}
	// 上个月点击天数
	function qdianjitian(iyear, imouth, item) {
		let itemm = 0
		// 如果月数小于1那就恢复到12月
		if (month.value <= 0) {
			itemm = 12
		} else {
			itemm = imouth
			// console.log("上个月", month.value)
		}
		const Y = JSON.stringify(iyear)
		const M = JSON.stringify(imouth)
		const D = JSON.stringify(item)
		const iqriqi = Y + itemm + D
		console.log("上个点击天数", iqriqi)
	}
	// 下个月点击天数
	function hdianjitian(iyear, imouth, item) {
		let itemm = 0
		// 如果月数大于12那就恢复到1月
		if (month.value >= 11) {
			itemm = 1
		} else {
			itemm = imouth
			// console.log("下个月", month.value)
		}
		const Y = JSON.stringify(iyear)
		const M = JSON.stringify(imouth)
		const D = JSON.stringify(item)
		const iqriqi = Y + itemm + D
		console.log("点击天数", iqriqi)
	}
	// 获取天数
	function huoqu() {
		const nian = year.value;
		const yue = month.value;
		const ri = day.value
		const jyue = yue + 1
		teday.value = nian + jyue + ri
		// 判断是否是今日,是今日给当日加背景
		const today = new Date();
		const jyear = today.getFullYear();
		const jmonth = today.getMonth() + 1; // 月份从0开始,所以要加1
		const jday = today.getDate();
		const jinri = jyear + jmonth + jday
		if (jinri === teday.value) {
			pdjr.value = true
			console.log("是今日")
		} else {
			pdjr.value = false
		}

		console.log("今天是", jinri, pdjr.value)
		console.log("随机年月日", teday.value)
		// 获取当月总天数
		totalDaysInMonth.value = new Date(nian, yue + 1, 0).getDate();
		// 获取当月1号是星期几
		weekdate.value = new Date(nian, yue - 1, 1).getDay();
		// 周如果等于0加1
		if (weekdate.value === 0) {
			weekdate.value += 1
			// console.log("周等于0", syue)
		} else {
			// console.log("周不等于0", syue)	
		}
		// 当月前空数据
		// 通过查找周期数据,返回前面有几个空数据
		const id = weekdate.value;
		const index = days.value.findIndex(item => item.id === id);
		const count = index >= 0 ? index : 0;
		qnullnumber.value = count
		// console.log(`当月前面有${qnullnumber.value}个数据`);

		console.log(`星期`, weekdate.value);
		// 给当月的前添加上个月多出的天数
		const number = [];
		for (let i = 1; i <= totalDaysInMonth.value; i++) {
			number.push(i);
		}
		// 获取上个月末尾的天数补充到当月前的空数据
		console.log("月", yue)
		let syue = yue
		if (syue === 0) {
			syue += 1
			// console.log("月等于0", syue)
		} else {
			// console.log("月不等于0", syue)	
		}
		const snumber = new Date(nian, syue, 0).getDate();
		const snumberss = [];
		for (let i = 1; i <= snumber; i++) {
			snumberss.push(i);
		}
		qnumber.value = snumberss
		// console.log("上个月天数", qnumber.value)
		// 从上个月天数后面开始取后本月缺少的空值
		const snum = qnullnumber.value
		const lastFour = qnumber.value.slice(-snum);
		qnumbers.value = lastFour
		console.log("上个月后面的天数", number);

		// 只显示前35个天数
		const slicedArray = number.slice(0, 35 - snum);
		// 查看数据是否满35个
		const tianshushuju = slicedArray.length;
		let chashu = ''
		let houbuqi = []
		if (tianshushuju < 35) {
			chashu = 35 - tianshushuju - snum

		} else {
			console.log("已够35个")
		}
		// 后面的差数赋值
		hnullnumber.value = chashu
		console.log("差", hnullnumber.value)
		for (let i = 0; i < chashu; i++) {
			houbuqi.push(i + 1); // 补齐数据,从1开始递增
		}
        
		numbers.value = slicedArray
		houmianbuqi.value = houbuqi
		console.log("当月天数", houbuqi)

	}
</script>

教学视频地址

点击跳转教学页面

也可以添加下方的名片

完整源码下载地址

点击跳转下载页面

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

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

相关文章

uniapp Vue3 面包屑导航 带动态样式

上干货 <template><view class"bei"><view class"container"><view class"indicator"></view><!-- 遍历路由列表 --><view v-for"(item, index) in routes" :key"index" :class&quo…

数据结构入门到入土——List的介绍

目录 一&#xff0c;什么是List&#xff1f; 二&#xff0c;常见接口介绍 三&#xff0c;List的使用 一&#xff0c;什么是List&#xff1f; 在集合框架中&#xff0c;List是一个接口&#xff0c;继承自Collection。 Collection也是一个接口&#xff0c;该接口中规范了后序容…

鸿蒙Harmony(八)ArkUI--状态管理器之@State

状态管理 在声明式UI中&#xff0c;是以状态驱动视图更新 状态&#xff1a;指驱动视图更新的数据&#xff08;被装饰器标记的变量&#xff09; StateProp 和 LinkProvide和 Consume State State装饰器标记的变量必须初始化&#xff0c;不能为空值State支持Object 、class、…

音视频学习(二十二)——rtmp发流(tcp方式)

前言 本文主要介绍自研的RtmpStreamSender.dll&#xff0c;rtmp库提供接口接收裸流数据&#xff0c;支持将裸流数据封装为flv格式并通过rtmp协议发流。 关于rtmp协议基础介绍可查看&#xff1a;https://blog.csdn.net/www_dong/article/details/131026072 关于rtmp收流介绍可…

java设计模式学习之【状态模式】

文章目录 引言状态模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用状态示例代码地址 引言 设想你正在使用一个在线视频播放器观看电影。随着你的互动&#xff0c;播放器可能处于不同的状态&#xff1a;播放、暂停、缓冲或结束。每个状态下&#xff0c;播放…

工具系列:TimeGPT_(6)同时预测多个时间序列

TimeGPT提供了一个强大的多系列预测解决方案&#xff0c;它涉及同时分析多个数据系列&#xff0c;而不是单个系列。该工具可以使用广泛的系列进行微调&#xff0c;使您能够根据自己的特定需求或任务来定制模型。 # Import the colab_badge module from the nixtlats.utils pac…

HTML+CSS制作动漫绿巨人

🎀效果展示 🎀代码展示 <!DOCTYPE html> <html lang="en" > <head>

115基于matlab的用于铣削动力学建模的稳定性叶瓣图分析(stablity lobe)

基于matlab的用于铣削动力学建模的稳定性叶瓣图分析(stablity lobe)&#xff0c;程序已调通&#xff0c;可直接运行。 115matlab铣削动力学 (xiaohongshu.com)

ajax请求——XMLHttpRequest请求

个人练习笔记-----Ajax01 一、GET <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</t…

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务实战

【Pytorch】学习记录分享9——PyTorch新闻数据集文本分类任务 1. 认为主流程code2. NLP 对话和预测基本均属于分类任务详细见3. Tensorborad 1. 认为主流程code import time import torch import numpy as np from train_eval import train, init_network from importlib impo…

在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序

如果您有 Android 设备&#xff0c;您可能会将个人和专业的重要文件保存在设备的 SD 卡上。这些文件包括照片、视频、文档和各种其他类型的文件。您绝对不想丢失这些文件&#xff0c;但当您的 SD 卡损坏时&#xff0c;数据丢失是不可避免的。 幸运的是&#xff0c;您不需要这样…

Redis的缓存过期淘汰策略

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…

docker学习(十八、network介绍)

[TOC]添加链接描述 首先&#xff0c;我们要知道什么是 Docker 网络。简单来说&#xff0c;它就是 Docker 中用于实现容器间通信的一个东西。 network相关内容&#xff1a; docker学习&#xff08;十八、network介绍&#xff09; docker学习&#xff08;十九、network使用示例br…

COSCon'23 主论坛回顾:基金会的治理模式

在开源软件和开源社区中&#xff0c;开源基金会扮演着至关重要的角色&#xff0c;为开源项目和社区提供了一种结构化和有组织的支持&#xff0c;有助于确保开源项目的成功、可持续性和广泛采用。她们充当了协调者、中介和支持者的角色&#xff0c;有助于促进开源技术的发展和推…

面向对象(高级)知识点强势总结!!!

文章目录 一、知识点复习1-关键字&#xff1a;static1、知识点2、重点 2-单例模式&#xff08;或单子模式&#xff09;1、知识点2、重点 3-理解main()方法1、知识点2、重点 4-类的成员之四&#xff1a;代码块1、知识点2、重点 5-关键字&#xff1a;final1、知识点2、重点 6-关键…

【Unity自制手册】基于Unity中物体移动相关方法和API集锦(动图详解)

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

数字时代跨境电商营销大变革:海外网红营销的力量与影响

随着全球化的推进和数字技术的不断发展&#xff0c;跨境电商行业迎来了一场营销变革的浪潮。在这个过程中&#xff0c;一种新的营销方式崭露头角&#xff0c;那就是海外网红营销。海外网红以其独特的个人魅力和影响力&#xff0c;成为跨境电商推广的重要力量&#xff0c;为品牌…

2023年下半年软件设计师上午真题及答案解析

1.在双核处理器中&#xff0c;双核是指( )。 A.执行程序时有两条指令流水线并行工作 B.在一个CPU中集成两个运算核心以提高运算能力 C.利用超线程技术实现的多任务并行处理 D.在主板上设置两个独立的 CPU 以提高处理能力 2.某文件管理系统在磁盘上建立了位示图(bitmap)&am…

JOSEF约瑟 温度继电器 JUC-1M (≥20℃断开)常开型

JUC系列温度继电器 JUC-1M型超小型密封温度继电器 JUC-2M型超小型密封温度继电器 继电器JUC-027M/2531H-III-G温度继电器 JUC-1M 10C常开温度继电器 JUC-1M 105C温度继电器 用途 超小型温控开关系接触感应式密封温度继电器&#xff0c;具有体积小、重量轻、控温精度高等特点&…