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.rhkb.cn/news/359661.html

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

相关文章

复分析——第7章——ζ 函数和素数定理(E.M. Stein R. Shakarchi)

第7章 ζ函数和素数定理 Bernhard Riemann, whose extraordinary intuitive powers we have already mentioned, has especially renovated our knowledge of the distribution of prime numbers, also one of the most mysterious questions in mathematics. He has tau…

uniapp实现路由拦截——遇到问题(三)

uniapp路由拦截开发过程中遇到问题 文章目录 uniapp路由拦截开发过程中遇到问题App 无法退出应用监听返回数据结构解决方式模拟原生物理返回键提示不提示&#xff0c;直接退出应用 微信小程序 登录成功返回页面报错效果图不同平台来源页面数据结构解决方式 App 无法退出应用 安…

WPF——属性

一、属性 类最初只有字段与函数&#xff0c;字段为一个变量&#xff0c;访问权限可以是private&#xff0c;protected&#xff0c;public。而将字段设为private&#xff0c;不方便外界对类数据的操作&#xff0c;但是将字段设为public又怕外界对数据进行非法操作&#xff0c;于…

SpringMVC系列十一: 文件上传与自定义拦截器

文章目录 SpringMVC文件上传基本介绍需求分析 / 图解应用实例-代码实现 自定义拦截器什么是拦截器自定义拦截器执行流程分析图自定义拦截器应用实例快速入门注意事项和细节Debug执行流程 多个拦截器多个拦截器执行流程示意图应用实例1代码实现注意事项和细节 应用实例2 作业布置…

怎么区分Boombap 制作Boombap曲子教学 boombap音乐出现的时间

Boombap音乐作为嘻哈音乐文化的重要组成部分&#xff0c;具有独特的音乐节奏、样式和情感。要理解和区分Boombap音乐&#xff0c;需要从其音乐的历史渊源、音乐特征和文化影响入手。接下来给大家介绍怎么区分Boombap&#xff0c;制作Boombap曲子教学的具体内容。 一、怎么区分B…

虚拟机配置桥接模式

背景 因为要打一些awd比赛,一些扫描工具什么的,要用到kali,就想着换成一个桥接模式 但是我看网上的一些文章任然没弄好,遇到了一些问题 前置小问题 每次点开虚拟网络编辑器的时候都没有vmnet0,但是点击更改的时候却有vmnet0 第一步: 点击更改设置 第二步: 把wmnet0删掉 …

【计算机视觉】人脸算法之图像处理基础知识(六)

图像直方图 图像直方图是描述图像中像素强度分布的一种统计图表&#xff0c;它是图像处理和计算机视觉领域中一个非常基础且重要的概念。图像直方图通常用于分析图像的亮度、对比度特性&#xff0c;以及在图像增强、阈值分割、特征提取等多种图像处理任务。 import cv2 impor…

高通安卓12-固件升级

下载步骤 第一步 格式化 「下载一次即可&#xff1b;能开机能下载的板子 忽略这一步&#xff0c;直接执行第二步即可」 QFIL工具配置为UFS类型&#xff0c;勾选Provision&#xff0c;如下图&#xff1a; Programmer选择prog_firehose_ddr.elf&#xff0c;Provision Xml选择prov…

ONLYOFFICE8.1版本桌面编辑器测评

https://www.onlyoffice.com/zh/ 随着工作方式的不断演变&#xff0c;文档编辑软件成为了我们日常工作中不可或缺的一部分。而ONLYOFFICE作为一款开源且功能丰富的办公套件&#xff0c;其最新推出的8.1版本在原有基础上进行了大量的优化与更新&#xff0c;旨在提供更流畅、更安…

无人机巡检小羊仿真

详细视频地址 仿真效果 可视化三维仿真 gazebo物理仿真 px4 飞控仿真 仿qgc简易地面站 详细视频地址

微信小程序之横向列表展示

效果图 参考微信小程序可看 代码&#xff1a; <view class"lbtClass"><view class"swiper-container"><scroll-view class"swiper" scroll-x"true" :scroll-left"scrollLeft"><block v-for"(six…

DDK电通拧紧MFC-S060控制器过流维修

一、DDK伺服拧紧轴控制器过流故障的成因 1. 电源电压过低&#xff1a;当电源电压过低时&#xff0c;控制器可能会出现过流现象。 2. 负载过大&#xff1a;当负载过大时&#xff0c;DDK电通拧紧机控制器MFC-S060的电流也会随之增大&#xff0c;可能导致过流故障。 3. 控制器内部…

低价可转债崩盘,发生了什么?

下跌不在于“出库”&#xff0c;甚至不在于“风险”。问题更多在于交易层面&#xff0c;何时能积聚更多的左侧资金并成功过渡至右侧。 低价券怎么了&#xff1f; 如果说6月初主要是小微盘品种的退市风险&#xff0c;后来是一些评级下调的品种&#xff0c;到本周&#xff0c;已…

精益思想在机器人开发中的应用体现

精益思想源于制造业&#xff0c;旨在通过消除浪费、优化流程、持续改进来提升企业竞争力。在机器人开发中&#xff0c;精益思想同样具有指导意义。它要求开发团队在需求分析、设计、制造、测试等各个环节中&#xff0c;不断追求精益求精&#xff0c;力求在降低成本的同时提升产…

仓颉编程语言入门

华为在 2024 年 6 月 21 日的华为开发者大会上&#xff0c;华为终端 BG 软件部总裁龚体正式官宣了华为自研仓颉编程语言&#xff0c;并发布了 HarmonyOS NEXT 仓颉语言开发者预览版。 仓颉编程语言文件后缀名为 .cj, 以下是第一个入门代码输出&#xff1a;你好&#xff0c;仓颉…

buuctf----firmware

- -一定不能再ubutu22进行,我是在18(血泪教训) binwalk安装 buuctf firmware(binwalk和firmware-mod-kit的使用)_buu firmware-CSDN博客 参考博客 指令 sudo apt-get update sudo apt-get install python3-dev python3-setuptools python3-pip zlib1g-dev libmagic-dev pi…

前端中的深拷贝

第1部分&#xff1a;引言 深拷贝&#xff1a;前端开发的隐形守护者 在前端开发的世界里&#xff0c;数据的传递和状态的管理是构建用户界面的基础。然而&#xff0c;数据的复制常常被忽视&#xff0c;直到它引发bug&#xff0c;我们才意识到它的重要性。深拷贝&#xff0c;这…

Springboot 共享电动单车管理系统-计算机毕业设计源码08401

目 录 摘要 1 绪论 1.1背景及意义 1.2国内外研究概况 1.3研究方法 1.4论文结构与章节安排 2 共享电动单车管理系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分…

React Suspense的原理

React Suspense组件的作用是当组件未完成加载时&#xff0c;显示 fallback 组件。那么 Suspense 是如何实现的呢&#xff1f;React 的渲染是通过 Fiber 进行的&#xff0c;Suspense 的更新机制也是要围绕 Fiber 架构进行的。Suspense 是由两部分组成&#xff0c;实际 UI 子组件…

自学指南:必备书籍清单--近100本R语言及生物信息相关书籍

R语言是一种功能丰富的编程语言&#xff0c;数据处理、统计分析是大家所熟知的基本功能。开源免费、活跃的全球社区、灵活可扩展等优点促使R语言飞速发展。目前&#xff0c;CRAN 软件包存储库包含 20446 个可用软件包&#xff0c;涵盖了从生物信息到金融分析等广泛的应用领域。…