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

el-date-picker 禁用一个月前、一个月后(当天之后)的时间 datetimerange

文章目录

  • 功能需求
    • 今天是 2025-01-09
    • 示例1
    • 示例2
  • 代码 Vue2

功能需求

时间范围选择器,最大时间选择尺度为一个月。

今天是 2025-01-09

示例1

选择 2025-01-02 日
禁用未来日期(2025-01-09之后日期)
禁用上月2号(31日之前)之前的日期
在这里插入图片描述

示例2

选择2024-12-02
禁用31日之前日期
禁用31日之后日期
在这里插入图片描述

代码 Vue2

<template><el-date-pickerv-model="dates"type="datetimerange"range-separator=""start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker>
</template><script>
export default {data() {return {dates: [],currentTime: '',pickerOptions: {onPick: ({minDate, maxDate}) => {if (maxDate) {this.currentTime = ''return}this.currentTime = minDate.getTime()},disabledDate: (time) => {const now = new Date()// 禁用当前时间之后的时间if (time.getTime() > now) return true// 禁用今天23:59:59 之后的时间;如果没有时、分、秒选择器,则不需要对时分秒进行特殊处理// if (time.getTime() > new Date(now.toLocaleDateString() + ' 23:59:59')) return trueconst limitDays = 31 * 24 * 3600 * 1000const minTime = this.currentTime - limitDaysconst maxTime = this.currentTime + limitDays// 禁用一月之前的时间if (time.getTime() < minTime) return true// 禁用一月之后 || 当前时间今天之后的时间// 添加this.currentTime判断: 如果未选择开始日期 或者 选择了结束时间时 this.currentTime 是 空的,if (this.currentTime && time.getTime() > maxTime) return truereturn false}}};},methods: {checkDisabled(date) {// 检查是否超过当前日期一个月const oneMonthLater = new Date(this.currentDate);oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);if (date >= oneMonthLater) {this.disabledDays.push(date);}},},watch: {dates(newDates) {// 当日期范围改变时,更新禁用日期和当前日期this.currentDate = newDates[1];this.checkDisabled(newDates[0]);this.checkDisabled(newDates[1]);// 清空已禁用的未来日期this.disabledDays = [];for (let date of this.dates) {this.checkDisabled(date);}},},
};
</script>

相关文章:

el-date-picker 禁用一个月前、一个月后(当天之后)的时间 datetimerange

文章目录 功能需求今天是 2025-01-09示例1示例2 代码 Vue2 功能需求 时间范围选择器&#xff0c;最大时间选择尺度为一个月。 今天是 2025-01-09 示例1 选择 2025-01-02 日 禁用未来日期&#xff08;2025-01-09之后日期&#xff09; 禁用上月2号&#xff08;31日之前&#…...

【C】编译与链接

在本文章里面&#xff0c;我们讲会讲解C语言程序是如何从我们写的代码一步步变成计算机可以执行的二进制指令&#xff0c;并最终执行的。C语言程序运行主要包括两大步骤 -- 编译和链接&#xff0c;接下来我们就来一一讲解。 目录 1 翻译环境和运行环境 2 翻译环境 1&#…...

Github上传项目

写在前面&#xff1a; 本次博客仅仅是个人学习记录&#xff0c;不具备教学作用。内容整理来自网络&#xff0c;太多了&#xff0c;所以就不放来源了。 在github页面的准备&#xff1a; 输入标题。 往下滑&#xff0c;创建 创建后会跳出下面的页面 进入home就可以看到我们刚…...

webrtc之rtc::ArrayView<const uint8_t>

rtc::ArrayView<const uint8_t> 是 WebRTC&#xff08;或其他基于 rtc 命名空间的库&#xff09;中常见的一个类型&#xff0c;它通常用于表示一块 只读的内存区域&#xff0c;该内存区域由一系列 uint8_t 类型&#xff08;无符号 8 位整数&#xff09;元素组成。 1. rt…...

Zemax 序列模式下的扩束器

扩束器结构原理 扩束器用于增加准直光束&#xff08;例如激光束&#xff09;的直径&#xff0c;同时保持其准直。它通常用于激光光学和其他需要修改光束大小或发散度的应用。 在典型的扩束器中&#xff0c;输入光束是准直激光器&#xff0c;或光束进入第一个光学元件。当光束开…...

Flink系统知识讲解之:如何识别反压的源头

Flink系统知识之&#xff1a;如何识别反压的源头 什么是反压 Ufuk Celebi 在一篇古老但仍然准确的文章中对此做了很好的解释。如果您不熟悉这个概念&#xff0c;强烈推荐您阅读这篇文章。如果想更深入、更低层次地了解该主题以及 Flink 网络协议栈的工作原理&#xff0c;这里有…...

RK3568平台(USB篇)禁用USB端口

一.linux中怎样查看usb的端口号 在USB口插入U盘: [ 198.141319][ T106] usb 3-1.3: new SuperSpeed Gen 1 USB device number 5 using xhci-hcd [ 198.161695][ T106] usb 3-1.3: New USB device found, idVendor=0781, idProduct=5591, bcdDevice= 1.00 [ 198.161721]…...

洛谷 P3000 [USACO10DEC] Cow Calisthenics G

思路 题目要求断若干条边后形成的连通块中&#xff0c;最大的直径最小&#xff0c;很明显的二分。关键就在于如何写 c h e c k check check 函数了。 可以用 d f s dfs dfs 来判断要断哪条边。 一、 d [ u ] d[u] d[u] 定义 设 d [ u ] d[u] d[u] 为从 u u u 出发到子树…...

Web渗透测试之XSS跨站脚本攻击 盲打 详解

目录 XSS盲打 什么是盲打: 盲打主要目的 XSS盲打 什么是盲打: 发现某个页面有xss漏洞 但是注入后没看到效果 而是在其它页面进行xss显示的效果 这种就叫盲打. 我注册了一个网站的用户 注册页面存在xss漏洞跳转到首页 看不到注册信息的输出 当管理员打开页面查看什么用户…...

经典编程题:服务器广播

题目描述&#xff1a; 服务器连接方式包括直接相连&#xff0c;间接连接。A 和 B 直接连接&#xff0c;B 和 C 直接连接&#xff0c;则 A 和 C 间接连接。直接连接和间接连接都可以发送广播。 给出一个 N*N 数组&#xff0c;代表 N 个服务器&#xff0c;matrix[i][j]1&#xf…...

【网络协议】静态路由详解

网络中的路由器通过以下两种方式之一发现远程网络&#xff1a; 静态配置路由动态路由协议 在本文&#xff0c;我们将学习关于静态路由的各种概念&#xff0c;例如如何配置静态路由、路由表如何进行决策、路由接口等相关知识。 文章目录 引言直连网络静态路由路由表原则原则1原…...

朝天椒USB服务器在银泰证券虚拟化超融合场景的应用案例

在数字化浪潮席卷金融行业的今天&#xff0c;银泰证券作为业内知名的金融机构&#xff0c;始终致力于提升业务运营效率与数据安全性。面对虚拟化超融合场景下各种认证U盾的管理挑战&#xff0c;银泰证券选择了朝天椒USB服务器作为其解决方案&#xff0c;成功实现了U盾在虚拟机中…...

.NET framework、Core和Standard都是什么?

对于这些概念一直没有深入去理解&#xff0c;以至于经过.net这几年的发展进化&#xff0c;概念越来越多&#xff0c;越来越梳理不容易理解了。内心深处存在思想上的懒惰&#xff0c;以为自己专注于Unity开发就好&#xff0c;这些并不属于核心范畴&#xff0c;所以对这些概念总是…...

FairGuard游戏安全2024年度报告

导 读&#xff1a;2024年&#xff0c;国内游戏市场实际销售收入3257.83亿元&#xff0c;同比增长7.53%&#xff0c;游戏用户规模6.74亿人&#xff0c;同比增长0.94%&#xff0c;市场收入与用户规模双双实现突破&#xff0c;迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&…...

JetBrains IDEs和Visual Studio Code的对比

JetBrains IDEs和Visual Studio Code的对比 JetBrains IDEs是捷克JetBrains公司开发的一系列集成开发环境(IDE)。以下是具体介绍:IntelliJ IDEA是JetBrains 公司的一款产品 主要产品 IntelliJ IDEA:一款功能强大且广泛应用的Java集成开发环境,有开源免费的社区版和商业收…...

文件剪切走:深度解析与高效恢复策略

一、文件剪切走现象解读 在计算机的日常使用中&#xff0c;“文件剪切走”这一术语形象地描述了文件在移动过程中意外丢失的现象。当用户尝试将文件从一个位置“剪切”并粘贴到另一个位置时&#xff0c;如果操作不当或系统出现异常&#xff0c;可能会导致文件在源位置消失&…...

Win32汇编学习笔记09.SEH和反调试

Win32汇编学习笔记09.SEH和反调试-C/C基础-断点社区-专业的老牌游戏安全技术交流社区 - BpSend.net SEH - structed exception handler 结构化异常处理 跟筛选一样都是用来处理异常的,但不同的是 筛选器是整个进程最终处理异常的函数,但无法做到比较精细的去处理异常(例如处理…...

[人工智能]CSDN创作助手体验

一、什么是智能体 智能体是一种能够感知环境、学习、推理和行动的实体。它可以是一个计算机程序、机器人或其他类似的系统。智能体的目标是通过与环境的交互来实现特定的任务或目标。 智能体通常由以下几个组件组成&#xff1a; 感知器&#xff1a;感知器是智能体与环境之间的…...

vue3中el-table实现多表头并表格合并行或列

1、el-table中添加事件 :span-method"genderSpanCity" <el-table :span-method"genderSpanCity":data"data.tableData":fit"true" table-layout"fixed" header-align"center" stripestyle"width:100%;he…...

HTML+CSS+JS制作中国传统节日主题网站(内附源码,含5个页面)

一、作品介绍 HTMLCSSJS制作一个中国传统节日主题网站&#xff0c;包含首页、节日介绍页、民俗文化页、节日活动页、联系我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部横幅区 包含传统中国风格的网站标题中国传统…...

网络编程(Modbus进阶)

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

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

Java编程之桥接模式

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

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...