当前位置: 首页 > news >正文

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库&#xff0c;使用前先保证项目中已经下载导入 主要功能&#xff1a;选择日期&#xff0c;点击日期可以让此日期滚动到视图中间&#xff0c;左滑右滑同理&#xff0c;支持跳转至任意日期&#xff0c;支持自…...

【大模型】大模型项目选择 RAGvs微调?

RAG 输入问题&#xff0c;在知识库匹配知识&#xff0c;构建提示词&#xff1a;基于{知识}回答{问题} 微调 用知识问答对重新训练大模型权重&#xff0c;输入问题到调整后的大模型 如何选择 如果业务要求较高&#xff0c;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 什么是元学习&#xff1f; 1.2 元学习的与少样本学习的关系 二、元学习的核心问题与挑战 2.1 核心问题 2.2 挑战 三、元学习的常见方法 3.1 基于优化的元学习 3.1.1 MAML&#xff08;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 之前存在&#xff0c;则覆盖&#xff0c;⽆论原来的数据类型是什么…...

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…...

给机器装上“脑子”—— 一文带你玩转机器学习

目录 一、引言&#xff1a;AI浪潮中的明星——机器学习 二、机器学习的定义与概念 1. 机器学习与传统编程的区别 2. 机器学习的主要任务类型 3. 机器学习的重要组成部分 三、机器学习的工作原理&#xff1a;从数据到模型的魔法之旅 1. 数据收集与预处理——数据是机器的…...

论文笔记:是什么让多模态学习变得困难?

整理了What Makes Training Multi-modal Classification Networks Hard? 论文的阅读笔记 背景方法OGR基于最小化OGR的多监督信号混合在实践中的应用 实验 背景 直观上&#xff0c;多模态网络接收更多的信息&#xff0c;因此它应该匹配或优于其单峰网络。然而&#xff0c;最好的…...

ChatGPT Search开放:实时多模态搜索新体验

点击访问 chatTools 免费体验GPT最新模型&#xff0c;包括o1推理模型、GPT4o、Claude、Gemini等模型&#xff01; ChatGPT Search&#xff1a;功能亮点解析 本次更新的ChatGPT Search带来了多项令人瞩目的功能&#xff0c;使其在搜索引擎市场中更具竞争力。 1. 高级语音模式&…...

Centos7.9 离线安装docker

实验环境&#xff1a; [root192 ~]# cat /etc/system-release CentOS Linux release 7.9.2009 (Core)下载二进制压缩包 a. 官网下载地址&#xff1a; https://download.docker.com/linux/static/stable/x86_64/b. 阿里云下载地址 https://mirrors.aliyun.com/docker-ce/lin…...

C语言函数在调用过程中具体是怎么和栈互动的?

从栈开始的一场C语言探险记 —— C语言函数是如何与栈"共舞"的。 栈的舞步解析 通过一个简单的例子来看看这支"舞蹈"&#xff1a; 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中常见的异常及其处理方式】

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 字符串修改的实现——StringBuilder和StringBuffer异常常见异常①算数异常②数组越界异常③空指针异…...

如何更新项目中的 npm 或 Yarn 依赖包至最新版本

要升级 package.json 文件中列出的包&#xff0c;你可以使用 npm&#xff08;Node Package Manager&#xff09;或 yarn。以下是两种工具的命令来更新你的依赖项&#xff1a; 使用 npm 更新所有包到最新版本 npm update如果你想将所有依赖项更新到其各自最新的大版本&#xf…...

SpringBoot3整合FastJSON2如何配置configureMessageConverters

在 Spring Boot 3 中整合 FastJSON 2 主要涉及到以下几个步骤&#xff0c;包括添加依赖、配置 FastJSON 作为 JSON 处理器等。下面是详细的步骤&#xff1a; 1. 添加依赖 首先&#xff0c;你需要在你的 pom.xml 文件中添加 FastJSON 2 的依赖。以下是 Maven 依赖的示例&#…...

《Vue3实战教程》2:Vue3快速上手

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 快速上手​ 线上尝试 Vue​ 想要快速体验 Vue&#xff0c;你可以直接试试我们的演练场。 如果你更喜欢不用任何构建的原始 HTML&#xff0c;可以使用 JSFiddle 入门。 如果你已经比较熟悉 Node.js 和构建工具等概念…...

ubuntu 24.04.1安装FTP流程

1、安装vsftpd&#xff1a; sudo apt update sudo apt install vsftpd 2、安装后重启查看vsftpd状态 sudo systemctl status vsftpd 输出如下所示&#xff0c;表明vsftpd服务处于活动状态并正在运行&#xff1a; * vsftpd.service - vsftpd FTP server Loaded: loaded (/…...

多功能护照阅读器港澳通行证阅读机RS232串口主动输出协议,支持和单片机/Linux对接使用

此护照阅读器支持护照、电子芯片护照、港澳通行证、台湾通行证&#xff0c;和串口的被动的方式不一样。此护照阅读器通电后&#xff0c;自动读卡&#xff0c;串口输出&#xff0c;软件只需要去串口监听数据即可&#xff0c;例如用串口助手就可以收到读卡信息。 非常适用于单片…...

5个用于构建Web应用程序的Go Web框架

探索高效Web开发的顶级Go框架 Go&#xff08;或称为Golang&#xff09;以其简洁性、高效性和出色的标准库而闻名。然而&#xff0c;有几个流行的Go Web框架和库为构建Web应用程序提供了额外的功能。以下是五个最值得注意的Go框架&#xff1a; 1. Gin&#xff1a; Gin是一个高…...

Qt中的异步相关类

Qt中的异步相关类 今天在学习别人的项目时&#xff0c;看到别人包含了QFuture类&#xff0c;我没有见过&#xff0c;于是记录一下。 直接在AI助手中搜索QFuture,得到的时Qt中异步相关的类。于是直接查询一下Qt异步中相关的类。 在Qt中&#xff0c;异步编程是一个重要的概念&…...

浅谈仓颉语言的优劣

仓颉语言&#xff0c;作为华为自研的新一代编程语言&#xff0c;以其高效、安全、现代化的特点&#xff0c;引起了广泛的关注。 仓颉语言的优势 高效并发 仓颉语言的一大亮点是其轻松并发的能力。它实现了轻量化用户态线程和并发对象库&#xff0c;使得高效并发变得轻松。仓颉…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...