vue3日历选择器

 倒叙日历：

<template><div class="date-picker"><div class="column" @wheel="onYearScroll"><div v-for="(year, index) in displayedYears" :key="index" :class="{current: year === currentYear.value && index === 1}">{{ year }}</div></div><div class="column" @wheel="onMonthScroll"><div v-for="(month, index) in displayedMonths" :key="index" :class="{current: month === currentMonth.value && index === 1}">{{ monthString(month) }}</div></div><div class="column" @wheel="onDayScroll"><div v-for="(day, index) in displayedDays" :key="index" :class="{current: day === currentDay.value && index === 1}">{{ dayString(day) }}</div></div></div>
</template><script setup>
import { ref, computed } from 'vue'const currentYear = ref(new Date().getFullYear())
const currentMonth = ref(new Date().getMonth() + 1)
const currentDay = ref(new Date().getDate())const displayedYears = computed(() => {const year = currentYear.valuereturn [year + 1, year, year - 1, year - 2]
})const displayedMonths = computed(() => {const month = currentMonth.valuereturn [(month + 1 - 1) % 12 + 1,month,(month - 1 + 12) % 12 || 12,(month - 2 + 12) % 12 || 12,]
})const daysInMonth = (year, month) => {return new Date(year, month, 0).getDate()
}const displayedDays = computed(() => {const year = currentYear.valueconst month = currentMonth.valueconst day = currentDay.valueconst daysInCurrentMonth = daysInMonth(year, month)return [(day + 1 - 1) % daysInCurrentMonth + 1,day,(day - 1 + daysInCurrentMonth - 1) % daysInCurrentMonth + 1,(day - 2 + daysInCurrentMonth - 1) % daysInCurrentMonth + 1]
})const onYearScroll = (event) => {event.preventDefault()if (event.deltaY < 0) {currentYear.value += 1} else {currentYear.value -= 1}// Reset month and day to 1currentMonth.value = 1currentDay.value = 1
}const onMonthScroll = (event) => {event.preventDefault()if (event.deltaY < 0) {currentMonth.value = (currentMonth.value % 12) + 1} else {currentMonth.value = (currentMonth.value - 1 + 11) % 12 + 1}// Reset day to 1currentDay.value = 1
}const onDayScroll = (event) => {event.preventDefault()const year = currentYear.valueconst month = currentMonth.valueconst daysInCurrentMonth = daysInMonth(year, month)if (event.deltaY < 0) {currentDay.value = (currentDay.value % daysInCurrentMonth) + 1} else {currentDay.value = (currentDay.value - 1 + daysInCurrentMonth - 1) % daysInCurrentMonth + 1}
}const monthString = (month) => {return month.toString().padStart(2, '0')
}const dayString = (day) => {return day.toString().padStart(2, '0')
}
</script><style>
.date-picker {display: flex;justify-content: center;align-items: center;gap: 20px;color: #fff !important;
}
.column {display: flex;flex-direction: column;align-items: center;width: 60px;
}
.column div {height: 30px;display: flex;justify-content: center;align-items: center;
}
.current {font-weight: bold;color: red;
}
</style>

正序日历：

 

<template><div class="date-picker"><div class="column" @wheel="onYearScroll"><div v-for="(year, index) in displayedYears" :key="index" :class="{current: year === currentYear}">{{ year }}</div></div><div class="column" @wheel="onMonthScroll"><div v-for="(month, index) in displayedMonths" :key="index" :class="{current: month === currentMonth}">{{ monthString(month) }}</div></div><div class="column" @wheel="onDayScroll"><div v-for="(day, index) in displayedDays" :key="index" :class="{current: day === currentDay}">{{ dayString(day) }}</div></div></div></template><script setup>import { ref, computed } from 'vue'const currentYear = ref(new Date().getFullYear())const currentMonth = ref(new Date().getMonth() + 1)const currentDay = ref(new Date().getDate())const displayedYears = computed(() => {const year = currentYear.valuereturn [year - 2, year - 1, year, year + 1, year + 2]})const displayedMonths = computed(() => {const month = currentMonth.valuereturn [(month - 2 + 12) % 12 || 12,(month - 1 + 12) % 12 || 12,month,(month + 1 - 1) % 12 + 1,(month + 2 - 1) % 12 + 1]})const daysInMonth = (year, month) => {return new Date(year, month, 0).getDate()}const displayedDays = computed(() => {const year = currentYear.valueconst month = currentMonth.valueconst day = currentDay.valueconst daysInCurrentMonth = daysInMonth(year, month)return [(day - 2 + daysInCurrentMonth) % daysInCurrentMonth || daysInCurrentMonth,(day - 1 + daysInCurrentMonth) % daysInCurrentMonth || daysInCurrentMonth,day,(day + 1 - 1) % daysInCurrentMonth + 1,(day + 2 - 1) % daysInCurrentMonth + 1]})const onYearScroll = (event) => {event.preventDefault()if (event.deltaY > 0) {currentYear.value += 1} else {currentYear.value -= 1}// Reset month and day to 1currentMonth.value = 1currentDay.value = 1}const onMonthScroll = (event) => {event.preventDefault()if (event.deltaY > 0) {currentMonth.value = (currentMonth.value % 12) + 1} else {currentMonth.value = (currentMonth.value - 1 + 11) % 12 + 1}// Reset day to 1currentDay.value = 1}const onDayScroll = (event) => {event.preventDefault()const year = currentYear.valueconst month = currentMonth.valueconst daysInCurrentMonth = daysInMonth(year, month)if (event.deltaY > 0) {currentDay.value = (currentDay.value % daysInCurrentMonth) + 1} else {currentDay.value = (currentDay.value - 1 + daysInCurrentMonth - 1) % daysInCurrentMonth + 1}}const monthString = (month) => {return month.toString().padStart(2, '0')}const dayString = (day) => {return day.toString().padStart(2, '0')}</script><style>.date-picker {display: flex;justify-content: center;align-items: center;gap: 20px;color: #fff !important;}.column {display: flex;flex-direction: column;align-items: center;width: 60px;}.column div {height: 30px;display: flex;justify-content: center;align-items: center;}.current {font-weight: bold;color: red;}</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SyntaxError: Unexpected token ‘??=‘

SyntaxError: Unexpected token ‘??=‘

前端运行报错&#xff1a; globalThis.GLOBAL_NX_VERSION ?? GLOBAL_NX_VERSION;^^^SyntaxError: Unexpected token ??解决&#xff1a; 检查node版本 node -v当前使用的是14.21.3的版本&#xff0c;切换到一个16.0.0以上的版本即可&#xff0c;推荐使用nvm管理node版本 …
阅读更多...
全球视角下的AI安全挑战：面向未来的准备

全球视角下的AI安全挑战：面向未来的准备

云安全联盟大中华区即将推出人工智能安全认证专家&#xff08;Certified Artificial Intelligence Security Professional&#xff0c;CAISP&#xff09;培训及认证计划&#xff0c;将在Q3全面上线。 在全球科技创新的洪流中&#xff0c;人工智能&#xff08;AI&#xff09;无…
阅读更多...
vue+fineReport 使用前端搜索+报表显示数据

vue+fineReport 使用前端搜索+报表显示数据

--fineReprot 将需要搜索的参数添加到模版参数 sql&#xff1a; --前端传递参数 注&#xff1a;因为每次点击搜索的结果需要不一样&#xff0c;还要传递一个时间戳的参数&#xff1a; let timesamp new Date().getTime()
阅读更多...
项目测试计划（Word）

项目测试计划（Word）

1简介 1.1 目的 1.2 范围 2. 测试参考文档和测试提交文档 2.1 测试参考文档 2.2 测试提交文档 3. 测试策略 3.1整体测试策略 3.2功能测试 3.3 界面测试 3.4 性能测试 3.5 安全性测试 3.6 工具 4 测试阶段进入和退出标准 4.1进入标准 4.2退出标准 5 测试范围 5.1需要测试的模块 …
阅读更多...
uboot基本使用网络命令和从服务器端下载linux内核启动

uboot基本使用网络命令和从服务器端下载linux内核启动

网络命令ip地址设置: setenv gmac_debug 0; setenv mdio_intf rgmii; setenv bootdelay 1; setenv ethaddr 00:xxxx:81:70; // mac地址 setenv ipaddr xxx; //开发板 IP 地址 setenv netmask 255.255.255.0; setenv gatewayip xxx.1; setenv serverip xxxx; //服…
阅读更多...
企业数据治理必备工具：智能元数据管理平台

企业数据治理必备工具：智能元数据管理平台

当下&#xff0c;企业拥有海量数据&#xff0c;但仅拥有数据并不能释放数据价值。我们还需要深入了解数据的各种属性、来源和关系等信息。这些信息被称为“元数据”&#xff0c;即用于描述数据的数据。 假设&#xff0c;把我们每个人的身份证、户口本都当做数据&#xff0c;那…
阅读更多...
使用 Python 注销、重启、关闭计算机

使用 Python 注销、重启、关闭计算机

众所周知&#xff0c;Python 是一种功能强大的脚本语言。在本文中&#xff0c;将编写一个 Python 程序本控制计算机&#xff0c;实现计算机的注销、重启、关闭等操作。 Python 中的 os 模块&#xff0c;提供了一种与操作系统交互的方式&#xff0c;可以使用 os.system() 函数在…
阅读更多...
统信桌面操作系统上使用命令行添加软件图标到任务栏

统信桌面操作系统上使用命令行添加软件图标到任务栏

原文链接&#xff1a;统信桌面操作系统上使用命令行添加软件图标到任务栏 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在统信桌面操作系统上使用命令行添加软件图标到任务栏的文章。通过命令行将常用软件的图标添加到任务栏&#xff0c;可以快速启动软件&#xf…
阅读更多...
20240627优雅草新产品取得原始软件著作权授权

20240627优雅草新产品取得原始软件著作权授权

https://doc.youyacao.com/22/2153 20240627优雅草新产品取得原始软件著作权授权 介绍 历程消息&#xff1a;优雅草2024年新产品最新取得原始著作权两份&#xff0c;2款产品将在近期完成为商业授权产品在蜻蜓松鼠官网售卖&#xff0c;本两款产品是智慧园区能源监测管理系统解…
阅读更多...
3D Wizard（巫师法师人物角色模型）

3D Wizard（巫师法师人物角色模型）

3D Wizard低多边形模型，可用于RPG射击游戏和其他项目。角色顶点数：44154 无HDRP 仅默认着色器 顶点数：44154 装配有人形骷髅。 下载：​​Unity资源商店链接资源下载链接 效果图：
阅读更多...
windows 10 通过wsl安装ubuntu子系统教程

windows 10 通过wsl安装ubuntu子系统教程

本章教程，主要记录我昨天通过Windows10 wsl安装Ubuntu的安装过程。其中遇到很多问题。 一、确定是否满足条件 系统要求操作系统版本： 需要 Windows 10 版本 1903 或更高版本，且操作系统内部版本号为 18362 或更高。 建议使用最新版本的 Windows 10 以获得最佳性能和最新功能…
阅读更多...
金航标电子

金航标电子

金航标&#xff08;www.kinghelm.com.cn&#xff09;电子成立以来&#xff0c;一直深耕微波射频领域的技术应用和发展&#xff0c;金航标研发生产“kinghelm”的北斗GPS天线连接器射频端子接插件等产品&#xff0c;受到车载导航定位广大终端客户的欢迎。宋仕强说&#xff0c;随…
阅读更多...
OpenAI“断供”对我们的影响之我见

OpenAI“断供”对我们的影响之我见

1.新闻 OpenAI决定于7月关闭国内GPT访问 近日&#xff0c;美国人工智能公司OpenAI宣布&#xff0c;将于7月起关闭对中国内地的GPT访问&#xff0c;此举引发了业内广泛关注和讨论。以下是关于此新闻的具体信息&#xff1a; 关闭时间&#xff1a;OpenAI官方推送的邮件指出&…
阅读更多...
springboot基于web模式的师资管理系统的设计与实现-计算机毕业设计源码040928

springboot基于web模式的师资管理系统的设计与实现-计算机毕业设计源码040928

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设师资管理系统 。 本设…
阅读更多...
LabVIEW 控制 Tucsen 相机

LabVIEW 控制 Tucsen 相机

LabVIEW 控制 Tucsen 相机 ucsen 是一家知名的显微镜相机制造商&#xff0c;其相机产品广泛应用于科研、工业和医疗等领域。本文将介绍如何使用 LabVIEW 软件来控制 Tucsen 相机&#xff0c;涵盖相机的基本情况、硬件和软件要求、具体的控制步骤和编程示例。通过使用 LabVIEW&…
阅读更多...
qt实现打开pdf（阅读器）功能用什么库比较合适

qt实现打开pdf（阅读器）功能用什么库比较合适

关于这个问题&#xff0c;网上搜一下&#xff0c;可以看到非常多的相关博客和例子&#xff0c;可以先看看这个总结性的博客&#xff08;https://zhuanlan.zhihu.com/p/480973072&#xff09; 该博客讲得比较清楚了&#xff0c;这里我再补充一下吧&#xff08;qt官方也给出了一些…
阅读更多...
信息系统项目管理师（项目立项管理）

信息系统项目管理师（项目立项管理）

项目建议书的主要内容包括项目的必要性、项目建设所必须的条件、项目的市场预测、产品方案或服务的市场预测项目评估的依据主要包括&#xff1a;项目建议书及其批准文件、项目可行性研究报告、报送组织的申请报告及主管部门的初审意见、项目关键建设条件和工程等的协议文件、必…
阅读更多...
World of Warcraft T2.5

World of Warcraft T2.5

World of Warcraft T2.5 猎人和术士套装需要的材料&#xff0c;好多啊&#xff0c;废墟和神殿打材料 猎人&#xff1a; 术士&#xff1a;
阅读更多...
python中类跟实例详解

python中类跟实例详解

主要分享一下自己在学习python中关于类和实例的基本概念以及用法&#xff0c;因为在写自动化测试用例的时候会使用类跟方法进行封装&#xff0c;使代码更加的简洁干净&#xff0c;以下是自己的一些学习心得 1.类跟实例的基础概念 类&#xff1a;是抽象的模板&#xff0c;比如动…
阅读更多...
【C++题解】1721. 输出个位为5或者个位为8数

【C++题解】1721. 输出个位为5或者个位为8数

问题&#xff1a;1721. 输出个位为5或者个位为8数 类型&#xff1a;简单循环 题目描述&#xff1a; 请从小到大输出 1∼n 中所有个位为 5 或者个位为8 的所有的整数&#xff0c;每行 1 个。 比如&#xff0c;假设 n20&#xff0c;那么满足条件的数输出如下&#xff1a; 5 8 1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023