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

DatePicker 日期选择器的使用(当日、近一周、近一月...)

template部分

<el-form-item label="操作日期:" style="margin-left: 50px;"><el-date-pickerv-model="dateRange"type="datetimerange"range-separator="~"start-placeholder="开始日期"end-placeholder="结束日期":shortcuts="shortcuts":disabled-date="disabledDate"style="width: 350px;":default-time="defaultTime"/>
</el-form-item>

script部分

// 初始化
const dateRange = ref<[Date, Date] | null>(null)// 禁用当前日期之后的时间
const disabledDate = (time: Date) => {return time.getTime() > Date.now()
}const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 2, 1, 23, 59, 59)
]const shortcuts = [{text: '当日',value: () => {const end = new Date()const start = new Date(end)start.setHours(0, 0, 0, 0) // 设置为当天的凌晨 00:00:00return [start, end]}},{text: '近1周',value: () => {const end = new Date()const start = new Date()start.setDate(start.getDate() - 7)return [start, end]}},{text: '近1月',value: () => {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 1)return [start, end]}},{text: '近3个月',value: () => {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 3)return [start, end]}},{text: '近6个月',value: () => {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 6)return [start, end]}}
]const quickSetDateRange = (range: string) => {const now = new Date()let start: Dateswitch (range) {case 'day':start = new Date(now)breakcase 'week':start = new Date(now)start.setDate(now.getDate() - 7)breakcase 'month':start = new Date(now)start.setMonth(now.getMonth() - 1)breakcase '3months':start = new Date(now)start.setMonth(now.getMonth() - 3)breakcase '6months':start = new Date(now)start.setMonth(now.getMonth() - 6)breakdefault:start = new Date(now)}dateRange.value = [start, now]
}// 初始化时过滤数据并设置默认日期范围为近一周
quickSetDateRange('week')
quickDateRange.value = 'week'

UI效果

相关文章:

DatePicker 日期选择器的使用(当日、近一周、近一月...)

template部分 <el-form-item label"操作日期:" style"margin-left: 50px;"><el-date-pickerv-model"dateRange"type"datetimerange"range-separator"~"start-placeholder"开始日期"end-placeholder&quo…...

【H2O2|全栈】JS进阶知识(六)ES6(2)

目录 前言 开篇语 准备工作 Set和Map 基本概念 Set 相互转化 常见属性和API 数组去重 并集、交集和差集 Map 转化 常见的属性和API Set和Map的区别 This的指向 function函数 箭头函数 修改this 使用方式 三种方式的异同 案例 更改this指向为obj 求数组数…...

聊聊主流几个JDK版本:JDK 8、JDK 11、JDK 17 和 JDK 21 的区别

聊聊主流几个JDK版本&#xff1a;JDK 8、JDK 11、JDK 17 和 JDK 21 的区别 一、JDK8二、JDK11三、JDK17四、JDK21 一、JDK8 JDK 8 发布于 2014 年&#xff0c;是 Java 语言的一个重要里程碑&#xff0c;带来了许多革命性的特性&#xff0c;改变了 Java 开发的方式。 主要更新的…...

MFC工控项目实例三十二模拟量校正值添加修改删除

用两个列表控件实现三十二模拟量校正值添加、修改、删除。 相关代码 void SenSet::OnSelchangeList1() //修改 {m_bAdd_2.EnableWindow(true);m_bParameter_2.EnableWindow(true);m_bDel_2.EnableWindow(false);nSel m_IDC_LIST1.GetCurSel();m_IDC_LIST1.GetText(nSel,nSel_…...

力扣第 60 题 “第 k 个排列”

题目描述 给定整数 n 和 k&#xff0c;返回由 1 到 n 组成的排列中第 k 个排列。 所有排列按字典序排列。1 ≤ n ≤ 9&#xff0c;1 ≤ k ≤ n!。 解题思路 要快速找到第 k 个排列&#xff0c;可以利用数学方法而不是生成所有排列&#xff1a; 1. 知识点&#xff1a;阶乘与…...

国际环境和背景下的云计算领域

前言 在当前国际环境和背景下&#xff0c;云计算领域呈现出复杂多变的局面&#xff0c;其发展深受技术创新、地缘政治、全球经济以及监管政策的影响。以下从技术趋势、市场竞争、地缘政治和监管环境四个方面详细解析云计算领域的现状。 一、技术趋势&#xff1a;多云与边缘计算…...

logstash 解析数组格式json数据:split, json

1&#xff0c;需求说明 原始数据格式&#xff1a; 1条 &#xff08;2*2&#xff09;》4个指标数据 [{"app":"aa","url":"www.1.com","metrics":[{"name":"cpu","value":11},{"name&quo…...

Linux的开发工具(二)

1.vim的基本操作 正常模式到插入模式 输入a 输入i 输入o 示例 输入iao下面的就会变成INSERT模式 插入模式到正常模式 按Esc键 正常模式到低行模式 shift&#xff1b; &#xff1a;w保存当前文件 &#xff1a;wq保存并退出 &#xff1a;q&#xff01;强制退出 2.vi…...

Bokeh实现大规模数据可视化的最佳实践

目录 引言 一、Bokeh简介 二、安装Bokeh 三、数据准备 四、性能优化 五、创建图表 六、添加交互功能 七、应用案例 八、高级技巧 九、总结 引言 在数据科学领域,数据可视化是一个至关重要的环节。通过可视化,我们可以直观地理解数据的特征和趋势,为数据分析和决策…...

Oracle表碎片整理与优化

Oracle数据库中的表碎片整理与优化是一个重要的维护任务&#xff0c;可以显著提高数据库的性能。表碎片通常是由于频繁的插入、删除和更新操作导致的。以下是一些常见的方法和步骤&#xff0c;帮助你进行表碎片整理与优化。 1. 识别碎片表 首先&#xff0c;需要识别哪些表存在…...

【华为云函数工作流】python的函数中如何获取请求链接中带的参数

背景 通过调用函数的url&#xff0c;将参数传递给函数执行&#xff0c;函数里如何获取这个参数 过程 下一个简单的demo如下 参考这个链接https://support.huaweicloud.com/devg-functiongraph/functiongraph_02_0420.html写一个demo&#xff0c;这个是百度视频云获取token的…...

最新Kali安装详细版教程(附安装包,傻瓜式安装教程)

本文主要详细介绍 kali 的安装过程&#xff0c;以及安装完成后的基本设置&#xff0c;比如安装增强工具&#xff0c;安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…...

【unity小技巧】unity最完美的CharacterController 3d角色控制器,实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果,复制粘贴即用

最终效果 文章目录 最终效果前言为什么使用CharacterControllerSimpleMove和Move如何选择&#xff1f;1. SimpleMove2. Move 配置CharacterController参数控制相机移动跳跃方式一方式二 下蹲处理下坡抖动问题实现奔跑和不同移速控制完整代码补充&#xff0c;简单版本 实现物理碰…...

66 mysql 的 表自增长锁

前言 mysql 的表锁之 AUTO_INC, 是我们自增长的时候做并发控制的锁 主要是用于 自增长生成新的 id 的时候的控制 在前面的文档中, 我们又看到 mysql 这边自增长的处理的相关的大概脉络 但是 对于一些 并发控制的细节, 我们当时 应该是直接忽略掉了 我们这里就来看一下…...

神经网络问题之一:梯度消失(Vanishing Gradient)

梯度消失&#xff08;Vanishing Gradient&#xff09;问题是深度神经网络训练中的一个关键问题&#xff0c;它主要发生在反向传播过程中&#xff0c;导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞&#xff0c;严重影响网络的训练效果和性能。 图1 在深度神经网络中容易出现…...

企业网页设计的安全与数据保护

企业网页设计不仅要考虑美观和功能性&#xff0c;安全与数据保护也是重中之重。在这个信息爆炸的时代&#xff0c;用户的数据隐私和安全问题日益凸显&#xff0c;企业必须采取多种措施来保障用户的信息安全。 首先&#xff0c;**SSL加密**是基础中的基础。通过使用SSL证书&…...

对 TypeScript 中类是怎么理解的?都有哪些应用场景?

在 TypeScript 中&#xff0c;类&#xff08;class&#xff09;是面向对象编程的核心构造之一&#xff0c;它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同&#xff0c;但它提供了额外的类型检查和静态类型系统&#xff0c;从而增…...

2024“龙信杯“电子数据取证竞赛-服务器取证题目Writeup

服务器检材-分析 前置 提示&#xff1a;该服务器做了登录密码校验配置&#xff0c;如果没有拿到服务器的密码而直接仿真服务器&#xff0c;输入密码进入系统后&#xff0c;服务器会将部分数据给自动删除 前提&#xff1a;无 因为我们仿真进入服务器会自动删除文件&#xff0…...

Label-studio-ml-backend 和YOLOV8 YOLO11自动化标注,目标检测,实例分割,图像分类,关键点估计,视频跟踪

这里写目录标题 1.目标检测 Detection2.实例分割 segment3.图像分类 classify4.关键点估计 Keypoint detection5.视频帧检测 video detect6.视频帧分类 video classify7.旋转目标检测 obb detect8.替换yolo11模型 给我点个赞吧&#xff0c;谢谢了附录coco80类名称 笔记本 华为m…...

Elasticsearch Windows版的安装及启动

一、下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch 如下图 选择版本 我用的是7.17.5 你换成你需要的版本 二 使用 1.解压 解压完如图 2.启动 进入 bin 文件目录&#xff0c;双击运行 elasticsearch.bat 文件启动 ES 服务 出现报错 Cause…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#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…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...