为elementui的el-date-picker时间选择器添加快捷选项

1、效果图

2、实现方法

直接在elementui的时间选择器上修改,添加shorcuts选项,但是样式要自己修改。

有几个注意点:

1)如图我是选中后有显示背景颜色的,也就意味着要给选中的选项添加类名,elementui没有这个功能,需要我们自己实现。

2)选中时间后,给对应的快捷选项也选中。比如我在时间选择器中选择了近7天,那么对应快捷选项也要选中。

3、代码

shortCuts:

 shortcuts: [
        {
            text: "今日",
            onClick(picker) {
                const [start, end] = getToday();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "昨日",
            onClick(picker) {
                const [start, end] = getYesterday();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "本周",
            onClick(picker) {
                const [start, end] = getWeek();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "上周",
            onClick(picker) {
                const [start, end] = getLastWeek();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "本月",
            onClick(picker) {
                const [start, end] = getMonth();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "上月",
            onClick(picker) {
                const [start, end] = getLastMonth();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近7天",
            onClick(picker) {
                const [start, end] = getPassedSeven();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近14天",
            onClick(picker) {
                const [start, end] = getPassedFourteen();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近30天",
            onClick(picker) {
                const [start, end] = getPassedThirty();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近60天",
            onClick(picker) {
                const [start, end] = getPassedSixty();
                picker.$emit("pick", [start, end]);
            },
        },
        {
            text: "近90天",
            onClick(picker) {
                const [start, end] = getPassedNinety();
                picker.$emit("pick", [start, end]);
            },
        },
    ]

获取各个时间的函数:

export function getToday() {
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    return [start, end];
}

export function getYesterday() {
    const start = new Date();
    start.setDate(start.getDate() - 1);
    start.setHours(0, 0, 0, 0); 
    const end = new Date();
    end.setDate(end.getDate() - 1);
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getWeek() {
    const start = new Date();
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const dayOfWeek = start.getDay() || 7;
    start.setDate(start.getDate() - dayOfWeek + 1);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getLastWeek() {
    const start = new Date();
    start.setDate(start.getDate() - 6 - (start.getDay() || 7));
    start.setHours(0, 0, 0, 0);

    const end = new Date(start);
    end.setDate(start.getDate() + 6); // 获取本周的最后一天
    end.setHours(23, 59, 59, 0);
    return [start, end];
}

export function getMonth() {
    const start = new Date();
    start.setDate(1); 
    start.setHours(0, 0, 0, 0);
    const end = new Date(); 
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getPassedSeven() {
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
    start.setHours(0, 0, 0, 0); 
    const end = new Date();
    end.setHours(23, 59, 59, 0); 
    return [start, end];
}

export function getPassedFourteen() {
    const start = new Date();
    start.setHours(0, 0, 0, 0);
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 13);
    return [start, end];
}

export function getPassedThirty() {
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
    start.setHours(0, 0, 0, 0); 
    return [start, end];
}

export function getPassedSixty() {
    const end = new Date();
    end.setHours(23, 59, 59, 0);
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 59);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getPassedNinety() {
    const end = new Date();
    end.setHours(23, 59, 59, 0); 
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);
    start.setHours(0, 0, 0, 0);
    return [start, end];
}

export function getLastMonth() {
    const today = new Date();
    const lastMonth = new Date(
        today.getFullYear(),
        today.getMonth() - 1,
        1
    );
    const firstDay = new Date(
        lastMonth.getFullYear(),
        lastMonth.getMonth(),
        1
    );
    const lastDay = new Date(
        lastMonth.getFullYear(),
        lastMonth.getMonth() + 1,
        0
    );
    firstDay.setHours(0, 0, 0, 0);
    lastDay.setHours(23, 59, 59, 0);
    return [firstDay, lastDay]
}

设置active的类名:

export function setShortCutsClass(text) {
    const data = document.getElementsByClassName('el-picker-panel__shortcut');
    for (let i of data) {
        if (i.innerText === '今日') {
            i.style.background = '#edf4fb';
            i.style.color = '#606266'
        }

        if (i.innerText === text) {
            i.classList.add('el-picker-panel__shortcut-active');
        } else {
            i.classList.remove('el-picker-panel__shortcut-active');
        }
    }
}

在时间选择器的change事件中选中时间后把对应的快捷选项设置为active:

setTimeShortClass(val) {
  Object.keys(this.timeMap).forEach((name) => {
    if (
      Date.parse(val[0]) === Date.parse(this.timeMap[name]()[0]) &&
      Date.parse(val[1]) === Date.parse(this.timeMap[name]()[1])
    ) {
      setShortCutsClass(name);
    }
  });
},

 timeMap: {
    今日: getToday,
    昨日: getYesterday,
    本周: getWeek,
    上周: getLastWeek,
    本月: getMonth,
    上月: getLastMonth,
    近7天: getPassedSeven,
    近14天: getPassedFourteen,
    近30天: getPassedThirty,
    近60天: getPassedSixty,
    近90天: getPassedNinety,
 }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python机器学习】核心数、进程、线程、超线程、L1、L2、L3级缓存

如何知道自己电脑的CPU是几核的,打开任务管理器(同时按下:Esc键、SHIFT键、CTRL键) 然后,点击任务管理器左上角的性能选项,观察右下角中的内核:后面的数字,就是你CPU的核心数,下图中我的是16个核心的。 需要注意的是,下面的逻辑处理器:32 表示支持 32 线程(即超线…

2024国赛数学建模C题完整论文:农作物的种植策略

农作物种植策略优化的数学建模研究(完整论文,持续更新,大家持续关注,更新见文末名片 ) 摘要 在本文中,建立了基于整数规划、动态规划、马尔科夫决策过程、不确定性建模、多目标优化、相关性分析、蒙特卡洛…

数据库MySQL零基础-下【详细】

目录 六、事务/视图/触发器/存储过程 1、事务的理解 (1)事务的理解 (2)事务的特性 2、事务的应用 (1)事务的开启与提交 # 语法 # 示例 (2)开启autocommit(临时生…

01* 到底是不是太胖了?

题目&#xff1a; 代码&#xff1a; #include <iostream> using namespace std;#include<stdlib.h> #include<stdio.h>int main() {int n;scanf("%d",&n);for(int i0;i<n;i){int H;scanf("%d",&H);float W;scanf("%f&q…

【信创】Linux终端禁用USB存储 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【信创】Linux终端禁用USB存储 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在Linux终端下禁用USB存储设备的文章。禁用USB存储设备可以提高系统的安全性&#xff0c;防止未经授权的人员将数据拷贝到外部存储设备或…

基于微信小程序+Java+SSM+Vue+MySQL的点餐平台系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSSMVueMySQL的点餐平台系统【附源码文档…

嵌入式-----汇编语言

一.ARM汇编语言程序格式 ARM汇编语言是以段(section)为单位来组织源文件的。段是相对独立的、具有特定名称的、不可分割的指令或者数据序列。 段又可以分为代码段和数据段,代码段存放执行代码,数据段存放代码运行时需要用到的数据。一个ARM源程序至少需要一个代码段,大的程序…

macos 系统文件操作时提示 Operation not permitted 异常解决方法 , 通过恢复模式 开启 /关闭 SIP方法

在macos系统中操作系统文件时提示 Operation not permitted 这个异常, 原因是因为在macos 10.11以上版本中默认启用了 SIP( System Integrity Protection )机制对系统文件进行保护, 要解决这个问题我们需要关机, 然后进入mac的恢复模式 : 在按电源键开机的同时, 一直按住 co…

C++ | Leetcode C++题解之第393题UTF-8编码验证

题目&#xff1a; 题解&#xff1a; class Solution { public:static const int MASK1 1 << 7;static const int MASK2 (1 << 7) (1 << 6);bool isValid(int num) {return (num & MASK2) MASK1;}int getBytes(int num) {if ((num & MASK1) 0) …

哈希表如何避免冲突

系列文章&#xff1a; 1. 先导片--Map&Set之二叉搜索树 2. Map&Set之相关概念 3. 哈希表如何避免冲突 目录 1.概念 2. 冲突-概念 3. 冲突-避免 3.1 冲突-避免-哈希函数设计 3.2 冲突-避免-负载因子调节 4. 冲突-解决 4.1 冲突-解决-闭散列 4.1.1 线性探…

RMAN Backup Job is Completed Netbackup NBU

RMAN Backup Job is Completed But RMAN Sessions are Not Released in Database When Using Netbackup (Doc ID 2903139.1)​编辑To Bottom In this Document Symptoms Changes Cause Solution APPLIES TO: Oracle Database - Enterprise Edition - Version 19.8.0.0.0 and …

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

YOLOv8+Deepsort+PyQt+GUI 语义分割+目标检测+姿态识别 三者合一(集成于一套系统)综合视觉分析系统

综合视觉分析系统 技术栈&#xff1a; YOLOv8&#xff1a;用于目标检测&#xff0c;是一个快速且准确的目标检测框架。DeepSORT&#xff1a;用于目标跟踪&#xff0c;结合了深度学习特征提取和卡尔曼滤波器来预测目标轨迹。GUI&#xff1a;提供一个直观易用的图形用户界面&am…

云计算和传统IT相比,有哪些优势?

云计算相比于传统的IT基础设施&#xff0c;具有以下一些显著的优势&#xff1a; 成本效益&#xff1a; 云计算通常采用按需付费模式&#xff0c;用户只需为实际使用的资源支付费用&#xff0c;避免了高昂的前期硬件投资和维护成本。 弹性计费方式使得企业可以根据业务需求灵活调…

汽车免拆诊断案例 | 捷豹 E-type怠速不稳定

故障现象 一辆3.8E型直列6缸的捷豹&#xff0c;该车的故障原因表现为怠速不稳定&#xff0c;转速不均匀&#xff0c;以及在节气门全开&#xff08;WOT工况&#xff09;时“回火”和加速踏板不能及时提速。这是该车型一个值得关注的典型案例。车主表示&#xff0c;几年前&#…

C++ STL 适配器

系列文章目录 模板特例化&#xff0c;偏特化&#xff0c;左右值引用 https://blog.csdn.net/surfaceyan/article/details/126794013 C STL 关联容器 https://blog.csdn.net/surfaceyan/article/details/127414434 C STL 序列式容器(二) https://blog.csdn.net/surfaceyan/arti…

基于准静态自适应环型缓存器(QSARC)的taskBus万兆吞吐实现

文章目录 概要整体架构流程技术名词解释技术细节1. 数据结构2. 自适应计算队列大小3. 生产者拼接缓存4. 高效地通知消费者 小结1. 性能表现情况2. 主要改进3. 源码和发行版 概要 准静态自适应环形缓存器&#xff08;Quasi-Static Adaptive Ring Cache&#xff09;是taskBus用于…

STM32F407VET6开发板RT-Thread MSH 串口的适配

相关文章 STM32F407VET6开发板RT-Thread的移植适配 环境 STM32F407VET6 开发板&#xff08;魔女&#xff09;&#xff0c;http://www.stm32er.com/ Keil MDK5&#xff0c;版本 5.36 串口驱动 RT-Thread 通过适配 串口驱动&#xff0c;可以使用 MSH shell 当前手动搭建的 …

详细分析linux中的MySql跳过密码验证以及Bug(图文)

目录 1.问题所示2. 基本知识3. 解决方法3.1 跳过验证Bug3.2 设定初始密码 1.问题所示 发现密码验证错误&#xff0c;遗失密码 2. 基本知识 停止MySQL服务&#xff1a;sudo systemctl stop mysql 以跳过权限表模式启动MySQL&#xff1a;sudo mysqld_safe --skip-grant-tables …

论文解读 | ACL2024 Outstanding Paper:因果指导的主动学习方法:助力大语言模型自动识别并去除偏见...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击阅读原文观看作者直播讲解回放&#xff01; 作者简介 孙洲浩&#xff0c;哈尔滨工业大学SCIR实验室博士生 概述 尽管大语言模型&#xff08;LLMs&#xff09;展现出了非常强大的能力&#xff0c;但它们仍然…