vue横向滚动日期选择器组件
vue横向滚动日期选择器组件
组件使用到了element-plus组件库和dayjs库,使用前先保证项目中已经下载导入
主要功能:选择日期,点击日期可以让此日期滚动到视图中间,左滑右滑同理,支持跳转至任意日期,支持自定义滚动日期的数量
组件中用到了other.ts
工具代码other.ts
import dayjs from 'dayjs'
import calendar from 'dayjs/plugin/calendar'
import 'dayjs/locale/zh-cn'dayjs.locale('zh-cn')
dayjs.extend(calendar)
dayjs().calendar(null, {sameDay: '[Today]', // The same day ( Today at 2:30 AM )nextDay: '[Tomorrow]', // The next day ( Tomorrow at 2:30 AM )nextWeek: 'dddd', // The next week ( Sunday at 2:30 AM )lastDay: '[Yesterday]', // The day before ( Yesterday at 2:30 AM )lastWeek: '[Last]', // Last week ( Last Monday at 2:30 AM )sameElse: 'DD/MM/YYYY' // Everything else ( 7/10/2011 )
})function judegSame(dj1: dayjs.Dayjs, dj2: dayjs.Dayjs) {return dj1.isSame(dj2)
}function getRelativeTime(dj: dayjs.Dayjs) {let now = dayjs(dayjs().format('YYYY-MM-DD'))if (judegSame(now, dj)) {return '今天'}now = now.add(1, 'day')if (judegSame(now, dj)) {return '明天'}now = now.add(1, 'day')if (judegSame(now, dj)) {return '后天'}let d = dj.day()const backArr = ['日', '一', '二', '三', '四', '五', '六']return '周' + backArr[d]
}export { dayjs, getRelativeTime }
组件代码SlideDatePicker.vue
<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import { dayjs, getRelativeTime } from './other';// 日期加载总量
const { count } = withDefaults(defineProps<{count: number
}>(), {count: 30
})
const activeIndex = ref(0)
const dateItemRefs = ref<HTMLElement[]>([])
const dateItmeWrapRef = ref<HTMLElement>()
const curDate = ref('') // 日期选择器 选择的日期const showDateList = ref<Record<string, any>[]>([])const emit = defineEmits(['dateChange'])function calc(format?: string) {if (!format) {format = dayjs().format('YYYY-MM-DD')}showDateList.value = []let beforeCount = Math.floor((count + 1) / 2) // 上取整let afterCount = Math.floor(count / 2)let cur = dayjs(dayjs(format).format('YYYY-MM-DD'))for (let i = 0; i < beforeCount; i++) {showDateList.value.push({date: cur.format('YYYYMMDD'),dateMd: cur.format('MMDD'),week: getRelativeTime(cur)})cur = cur.subtract(1, 'day')}showDateList.value = showDateList.value.reverse() // 反转 让最早的日期排在第一位cur = dayjs(dayjs(format).format('YYYY-MM-DD'))for (let i = 0; i < afterCount; i++) {cur = cur.add(1, 'day')showDateList.value.push({date: cur.format('YYYYMMDD'),dateMd: cur.format('MMDD'),week: getRelativeTime(cur)})}
}const getMiddle = computed(() => {return Math.floor((showDateList.value.length + 1) / 2) - 1
})function move(step: number) {// 越界无效if (activeIndex.value + step >= showDateList.value.length || activeIndex.value + step < 0) {return}activeIndex.value += stepdateItmeWrapRef.value?.scrollTo({behavior: 'smooth',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})curDate.value = dayjs(showDateList.value[activeIndex.value].date, 'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange', curDate.value)
}function moveToIndex(index: number) {if (index >= showDateList.value.length || index < 0) {return}activeIndex.value = indexdateItmeWrapRef.value?.scrollTo({behavior: 'smooth',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})curDate.value = dayjs(showDateList.value[activeIndex.value].date, 'YYYYMMDD').format('YYYY-MM-DD')emit('dateChange', curDate.value)
}function datePickerChange(value: string) {// 重新计算curDate.value = dayjs(value).format('YYYY-MM-DD')calc(curDate.value)activeIndex.value = getMiddle.valuenextTick(() => {dateItmeWrapRef.value?.scrollTo({behavior: 'instant',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})})emit('dateChange', curDate.value)
}onMounted(() => {calc()activeIndex.value = getMiddle.valuecurDate.value = dayjs().format('YYYY-MM-DD')nextTick(() => {dateItmeWrapRef.value?.scrollTo({behavior: 'instant',left: (dateItemRefs.value[activeIndex.value].offsetLeft - dateItmeWrapRef.value.offsetWidth / 2)})})
})</script><template><div class="date_picker_wrap"><div class="left_icon"><el-button :icon="ArrowLeft" link @click="move(-1)"></el-button></div><div class="date_item_wrap" ref="dateItmeWrapRef"><div class="date_item" :class="index === activeIndex ? 'active' : ''" v-for="(item, index) in showDateList"ref="dateItemRefs" @click="moveToIndex(index)"><span>{{ item.dateMd }}</span><span>{{ item.week }}</span></div></div><div class="right_icon"><el-button :icon="ArrowRight" link @click="move(1)"></el-button></div><div class="calendar_icon"><el-date-picker style="width: 126px;" v-model="curDate" type="date" placeholder="选择日期" format="YYYY-MM-DD":clearable="false" @change="datePickerChange" /></div></div>
</template><style scoped>
.date_picker_wrap {background: #fff;width: 100%;height: 52px;border-radius: 6px;padding: 4px 8px;display: flex;align-items: center;font-size: 14px;color: #4b5563;.date_item_wrap {width: 100%;display: flex;flex: 1;overflow: hidden;.active {color: #3c6cfe;}.date_item {padding: 0 6px;width: 96px;height: 100%;display: flex;align-items: center;justify-content: center;flex-shrink: 0;border-left: solid 1px #e5e7eb;border-right: solid 1px #e5e7eb;cursor: pointer;&:hover {color: #3c6cfe;}span {padding: 0 2px;}}}.left_icon,.right_icon,.calendar_icon {padding: 0 8px;}
}
</style>
使用方式
传入count 30,组件初始化横向滚动日期数为30个,初始化数量不要太少,最好占满宽度,让其可以滚动。
<SlideDatePicker :count="30" @dateChange="dateChange" />
function dateChange(value: string) {console.log('选中的日期', value); // 2024-12-19
}
效果图

相关文章:
vue横向滚动日期选择器组件
vue横向滚动日期选择器组件 组件使用到了element-plus组件库和dayjs库,使用前先保证项目中已经下载导入 主要功能:选择日期,点击日期可以让此日期滚动到视图中间,左滑右滑同理,支持跳转至任意日期,支持自…...
【大模型】大模型项目选择 RAGvs微调?
RAG 输入问题,在知识库匹配知识,构建提示词:基于{知识}回答{问题} 微调 用知识问答对重新训练大模型权重,输入问题到调整后的大模型 如何选择 如果业务要求较高,RAG和微调可以一起使用 1-动态数据 选择RAG 原因&a…...
2024年12月CCF-GESP编程能力等级认证Python编程一级真题解析
本文收录于专栏《Python等级认证CCF-GESP真题解析》,专栏总目录:点这里,订阅后可阅读专栏内所有文章。 一、单选题(每题 2 分,共 30 分) 第 1 题 2024年10月8日,诺贝尔物理学奖“意外地”颁给了两位计算机科学家约翰霍普菲尔德(John J. Hopfield)和杰弗里辛顿(Geof…...
【机器学习】元学习(Meta-learning)
云边有个稻草人-CSDN博客 目录 引言 一、元学习的基本概念 1.1 什么是元学习? 1.2 元学习的与少样本学习的关系 二、元学习的核心问题与挑战 2.1 核心问题 2.2 挑战 三、元学习的常见方法 3.1 基于优化的元学习 3.1.1 MAML(Model-Agnostic Meta…...
详解Redis的String类型及相关命令
目录 SET GET MGET MSET SETNX SET和SETNX和SETXX对比 INCR INCRBY DECR DECRBY INCRBYFLOAT APPEND GETRANGE SETRANGE STRLEN 内部编码 SET 将 string 类型的 value 设置到 key 中。如果 key 之前存在,则覆盖,⽆论原来的数据类型是什么…...
android RadioButton + ViewPager+fragment
RadioGroup viewpage fragment 组合显示导航栏 1、首先主界面的布局控件就是RadioGroup viewpage <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools…...
给机器装上“脑子”—— 一文带你玩转机器学习
目录 一、引言:AI浪潮中的明星——机器学习 二、机器学习的定义与概念 1. 机器学习与传统编程的区别 2. 机器学习的主要任务类型 3. 机器学习的重要组成部分 三、机器学习的工作原理:从数据到模型的魔法之旅 1. 数据收集与预处理——数据是机器的…...
论文笔记:是什么让多模态学习变得困难?
整理了What Makes Training Multi-modal Classification Networks Hard? 论文的阅读笔记 背景方法OGR基于最小化OGR的多监督信号混合在实践中的应用 实验 背景 直观上,多模态网络接收更多的信息,因此它应该匹配或优于其单峰网络。然而,最好的…...
ChatGPT Search开放:实时多模态搜索新体验
点击访问 chatTools 免费体验GPT最新模型,包括o1推理模型、GPT4o、Claude、Gemini等模型! ChatGPT Search:功能亮点解析 本次更新的ChatGPT Search带来了多项令人瞩目的功能,使其在搜索引擎市场中更具竞争力。 1. 高级语音模式&…...
Centos7.9 离线安装docker
实验环境: [root192 ~]# cat /etc/system-release CentOS Linux release 7.9.2009 (Core)下载二进制压缩包 a. 官网下载地址: https://download.docker.com/linux/static/stable/x86_64/b. 阿里云下载地址 https://mirrors.aliyun.com/docker-ce/lin…...
C语言函数在调用过程中具体是怎么和栈互动的?
从栈开始的一场C语言探险记 —— C语言函数是如何与栈"共舞"的。 栈的舞步解析 通过一个简单的例子来看看这支"舞蹈": int add(int a, int b) {int result a b;return result; }int main() {int x 10;int y 20;int sum add(x, y);retur…...
【Java中常见的异常及其处理方式】
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:“没有罗马,那就自己创造罗马~” 文章目录 字符串修改的实现——StringBuilder和StringBuffer异常常见异常①算数异常②数组越界异常③空指针异…...
如何更新项目中的 npm 或 Yarn 依赖包至最新版本
要升级 package.json 文件中列出的包,你可以使用 npm(Node Package Manager)或 yarn。以下是两种工具的命令来更新你的依赖项: 使用 npm 更新所有包到最新版本 npm update如果你想将所有依赖项更新到其各自最新的大版本…...
SpringBoot3整合FastJSON2如何配置configureMessageConverters
在 Spring Boot 3 中整合 FastJSON 2 主要涉及到以下几个步骤,包括添加依赖、配置 FastJSON 作为 JSON 处理器等。下面是详细的步骤: 1. 添加依赖 首先,你需要在你的 pom.xml 文件中添加 FastJSON 2 的依赖。以下是 Maven 依赖的示例&#…...
《Vue3实战教程》2:Vue3快速上手
如果您有疑问,请观看视频教程《Vue3实战教程》 快速上手 线上尝试 Vue 想要快速体验 Vue,你可以直接试试我们的演练场。 如果你更喜欢不用任何构建的原始 HTML,可以使用 JSFiddle 入门。 如果你已经比较熟悉 Node.js 和构建工具等概念…...
ubuntu 24.04.1安装FTP流程
1、安装vsftpd: sudo apt update sudo apt install vsftpd 2、安装后重启查看vsftpd状态 sudo systemctl status vsftpd 输出如下所示,表明vsftpd服务处于活动状态并正在运行: * vsftpd.service - vsftpd FTP server Loaded: loaded (/…...
多功能护照阅读器港澳通行证阅读机RS232串口主动输出协议,支持和单片机/Linux对接使用
此护照阅读器支持护照、电子芯片护照、港澳通行证、台湾通行证,和串口的被动的方式不一样。此护照阅读器通电后,自动读卡,串口输出,软件只需要去串口监听数据即可,例如用串口助手就可以收到读卡信息。 非常适用于单片…...
5个用于构建Web应用程序的Go Web框架
探索高效Web开发的顶级Go框架 Go(或称为Golang)以其简洁性、高效性和出色的标准库而闻名。然而,有几个流行的Go Web框架和库为构建Web应用程序提供了额外的功能。以下是五个最值得注意的Go框架: 1. Gin: Gin是一个高…...
Qt中的异步相关类
Qt中的异步相关类 今天在学习别人的项目时,看到别人包含了QFuture类,我没有见过,于是记录一下。 直接在AI助手中搜索QFuture,得到的时Qt中异步相关的类。于是直接查询一下Qt异步中相关的类。 在Qt中,异步编程是一个重要的概念&…...
浅谈仓颉语言的优劣
仓颉语言,作为华为自研的新一代编程语言,以其高效、安全、现代化的特点,引起了广泛的关注。 仓颉语言的优势 高效并发 仓颉语言的一大亮点是其轻松并发的能力。它实现了轻量化用户态线程和并发对象库,使得高效并发变得轻松。仓颉…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强,React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 (1)使用React Native…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
