当前位置: 首页 > 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;使得高效并发变得轻松。仓颉…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...