el-date-picker日期时间选择器限制可选的日期范围

news2025/5/21 21:01:47

业务场景:需要限制日期时间选择器可选择的日期,有两种模式,

一种是已知范围,只能选已知范围内的日期,

另一种是知道最近天数,只能选今天往前的天数内的日期,超出不能选。

<el-date-picker 
  v-model="formData.getTime" 
  :disabledDate="disabledDateOptions"
  type="datetime" :clearable="false"
  @change="changeDateTime"
  format='YYYY-MM-DD HH:mm'
  value-format="YYYY-MM-DD HH:mm:ss"
  placeholder="采集时间"/>
disabledDateOptions: (date) => {
        if (state.modeChoice == '1') {
          // 时间范围模式 例如在"2023-11-16"到"2024-01-04"这段期间可以选,否则不可以选
          const startDate = new Date(moment("2023-11-16").format('YYYY-MM-DD 00:00:00'));
          const endDate = new Date(moment("2024-01-04").format('YYYY-MM-DD 23:59:59'));
          return date.getTime() < startDate.getTime() || date.getTime() > endDate.getTime();
        } else {
          // 最近天数模式 例如state.timedays = 3, 那就是从今天起3天前的可以选,其他日期不能选
          return date.getTime() > Date.now() || date.getTime() < Date.now() - 24 * 60 * 60 * 1000 * state.timedays
        }
}

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java Review - Spring BeanUtils 踩坑记

文章目录 概述Spring BeanUtils基本使用Code忽略了属性类型导致拷贝失败同一字段在不同的类中定义的类型不一致同一个字段分别使用包装类和基本类型且没有传递实际值布尔类型的属性分别使用了基本类型和包装类型且属性名使用is开头 null值覆盖导致数据异常内部类数据无法成功拷…

vercel部署Gemini pro

一、注册一个vercel账号&#xff08;这个东西类似于第三方的github pages&#xff0c;能部署github中的项目&#xff09; 二、注册结束后&#xff0c;填写github的账号&#xff08;需要事先在该github账号中fork一个gemini的repository&#xff09; 三、babaohuang/GeminiPro…

对话惠买集团董事长兼CEO杜瑞勇:直播电商粗放时代结束,如何用AI+XR打造精细化的智慧直播生态?

“ 未来将是专业选手精细化运营的智慧直播时代。“ 整理 | 梦婕 编辑 | 渔舟 出品&#xff5c;极新&#xff06;北京电子商务协会 直播电商在经过爆发式增长后&#xff0c;从业者不断涌入&#xff0c;竞争日趋激烈&#xff0c;行业发展必然将会进入到一个缓慢增长阶段。直播…

深度优先搜索算法,图的深度优先搜索

深度优先搜索&#xff0c;其核心思想就是以一个点作为搜索的起始点&#xff0c;沿着这个点的分支路径不断地深入&#xff0c;直到没有满足条件的点则退回&#xff0c;并以新的起始点为搜索的点&#xff0c;重复以上的过程&#xff0c;图的遍历就是以深度优先搜索思想为解决问题…

【LeetCode】每日一题 2023_12_30 一周中的第几天(调库)

文章目录 随便聊聊时间题目&#xff1a;一周中的第几天题目描述代码与解题思路 随便聊聊时间 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 其实昨天我应该也发一个题解的&#xff0c;昨天的每日一题也是一个简单题&#xff0c;可惜当时上头做项目去了&…

3D目标检测(教程+代码)

随着计算机视觉技术的不断发展&#xff0c;3D目标检测成为了一个备受关注的研究领域。与传统的2D目标检测相比&#xff0c;3D目标检测可以在三维空间中对物体进行定位和识别&#xff0c;具有更高的准确性和适用性。本文将介绍3D目标检测的相关概念、方法和代码实现。 一、3D目…

二、串行FLASH文件系统FatFs移植

经过上一节的分析&#xff0c;我们对文件系统有一定的理解了&#xff0c;这一节给大家介绍怎么把FatFs文件系统的这些代码移植到STM32S上&#xff0c;然后STM32利用这一些代码或者函数&#xff0c;以文件的格式对FLASH进行读写数据。 实则对diskio.c提供一些函数接口。 首先将…

ebay头像如何设置?eBay店铺的头像怎么改?-站斧浏览器

ebay头像如何设置&#xff1f; eBay店铺的头像可以通过以下方式进行设置&#xff1a; 登录eBay账户&#xff1a;店主需要使用自己的eBay账号登录到eBay网站。 进入店铺管理后台&#xff1a;在登录后&#xff0c;店主可以点击页面右上角的用户名或店铺名称&#xff0c;从下拉…

初学者SkyWalking详细使用文档

SkyWalking使用文档 下载地址&#xff1a;https://skywalking.apache.org/downloads/ 主要下载&#xff1a;skywalking apm&#xff08;tar&#xff09; 、agents(tar) 解压&#xff1a; &#xff08;可选操作&#xff09;&#xff1a; ​ apache-skywalking-apm-bin --&g…

Flink实时电商数仓之旁路缓存

撤回流的处理 撤回流是指流式处理过程中&#xff0c;两表join过程中的数据是一条一条跑过来的&#xff0c;即原本可以join到一起的数据在刚开始可能并没有join上。 撤回流的格式&#xff1a; 解决方案 定时器&#xff1a;使用定时器定时10s&#xff08;数据最大的时间差值&am…

02-微服务-Eureka注册中心

Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f;有多个user-service实例地址&#xff0c;…

Idea如何配置git

打开Ideal&#xff0c;点击Settings&#xff0c;找到Version Control这一栏&#xff0c;然后点开&#xff0c;找到Git 如果我们电脑是已经有git&#xff0c;那我们就点击那个有点像文件夹的标致&#xff0c;然后找到我们安装在电脑上面的自己安装的git的exe结尾的文件&#xff…

【论文阅读笔记】Stable View Synthesis 和 Enhanced Stable View Synthesis

目录 Stable View Synthesis摘要引言 Enhanced Stable View Synthesis 从Mip-NeRF360的对比实验中找到的两篇文献&#xff0c;使用了卷积神经网络进行渲染和新视角合成&#xff0c;特此记录一下 ToDo Stable View Synthesis paper&#xff1a;https://readpaper.com/pdf-ann…

JS中 focus 和 blur 焦点事件

发现的一个小知识点 focus 获取焦点事件 代码如下&#xff1a; <body><input type"text" placeholder"input输入框"><script>let input document.querySelector(input)input.addEventListener(focus, function (e) {e.target.style.…

(读书笔记)网络是如何连接的

1.1 生成 HTTP 请求消息 浏览器是一个具备多种客户端功能的综合性客户端软件,因此它需要 一些东西来判断应该使用其中哪种功能来访问相应的数据,而各种不同的 URL(Uniform Resource Locator,统一资源定位符。) 就是用来干这个的,比如访问 Web 服务器时用“http:”,而访…

三段式电流保护与自动重合闸MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 前加速、后加速的区别&#xff1a; 前加速是保护装置不判别是永久性故障还是瞬时故障&#xff0c;直接跳闸&#xff0c;然后经重合闸装置来纠正&#xff1b;后加速是保护装置是先判别故障类型有选择性跳闸 …

【Linux Shell】4. 数组

文章目录 【 1. 数组的定义 】【 2. 读取数组 】【 3. 关联数组 】【 4. 获取数组中的所有元素 】【 5. 获取数组的长度 】 数组中可以存放多个值。 Bash Shell 只支持一维数组&#xff08;不支持多维数组&#xff09;&#xff0c;初始化时不需要定义数组大小。与大部分编程语言…

【动态规划】LeetCode-10. 正则表达式匹配

10. 正则表达式匹配。 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xff0c;而不是部分字符串。 …

Microsoft Word去除页面多余的换行符

大家写论文的时候或者排版的时候可能遇到换行符多出来了导致页面的不美观。像下面这张图一样&#xff0c;虽然latex不会出现这种问题。 处理方式 点击插入然后点击分页 结果展示

设计模式 七大原则

1.单一职责原则 单一职责原则&#xff08;SRP&#xff1a;Single responsibility principle&#xff09;又称单一功能原则 核心&#xff1a;解耦和增强内聚性&#xff08;高内聚&#xff0c;低耦合&#xff09;。 描述&#xff1a; 类被修改的几率很大&#xff0c;因此应该专注…