element DatePicker 日期选择器设置禁用未来日期,时间范围为60天

news2024/11/20 7:04:14

需要用到 DatePicker 里面的 picker-options 方法

在这里插入图片描述
在这里插入图片描述

disabledDate onPick方法

<el-date-picker
   v-model="form.xxxx"
   type="daterange"
   value-format="yyyy-MM-dd"
  :clearable="false"
  :picker-options="pickerOptions"
  start-placeholder="开始"
  end-placeholder="结束">
</el-date-picker>

pickerOptions: {
          onPick: ({ maxDate, minDate }) => {
            this.currentDate = minDate.getTime();
            if (maxDate) {
              this.currentDate = "";
            }
          },
          disabledDate: (time)=> limitDate(time, this.currentDate)
},

//禁用未来日期,限制时间范围为60天
limitDate = (time, currentDate) => {
  if (currentDate!== "") {
    const one = 60 * 24 * 3600 * 1000; //设置现在时间范围60天
    const minTime = currentDate - one; //获取当前时间往前30天的时间
    const maxTime = currentDate + one;  //获取当前时间往后30天的时间
    return (
    //限制时间不能选中当前时间往前的30天, 往后的30天
      time.getTime() < minTime || 
      time.getTime() > maxTime ||
      time.getTime() > Date.now() //设置禁用未来日期
    )
  } else {
    return time.getTime() > Date.now() //设置禁用未来日期
  }
}

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

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

相关文章

「React」2024最新版本入门 React 19 你需要掌握什么

前言 React 是前端很火且被广泛使用的一个框架&#xff0c;在当下这个时间想入门上手React开发&#xff0c;我们需要了解它的哪些最为关键的特性&#xff0c;本文将一一列出。 介绍 类组件在官方文档中也已经被废弃&#xff0c;下面均为 React Hooks useStateuseEffectuse…

C - Sigma Problem(AtCoder Beginner Contest 353)

题目的链接: C - Sigma Problem (atcoder.jp) 题目&#xff1a; 样例&#xff1a; 题目大致含意: 给你n个数&#xff0c;让你对这n个数进行操作&#xff0c;比如当前是第i个&#xff0c;那么让a[i] 和 后面的每个数进行相加, 例如a[i] a[i 1] 注意的是a[i] a[i 1]的结果…

ASTGCN 论文学习上

这里写自定义目录标题 Attention Based Spatial-Temporal Graph Convolutional Networks for Traffic Flow Forecasting1. 摘要1.1 背景1.2 现有方法的不足1.3 提出的方法1.3.1 方法细节 1.4 实验结果 2 引言2.1 研究背景2.2 问题描述2.3 数据基础2.4 现有方法及其局限性2.5 提…

Easy Notes 彩色记事本,备忘录,笔记本,尊享版 v1.2.42.0517

软件介绍 「Easy Notes」是一款为用户量身打造的简易记事本管理应用APP&#xff0c;其功能覆盖了笔记撰写、备忘录设置、彩色便签制作及加密文档存储等。该应用程序以简洁的界面和便捷的操作性为核心&#xff0c;为用户提供了一个多元化的记录体验。借助其彩色背景与分类清单的…

AI预测体彩排3采取878=23策略+杀断组+杀和尾+杀和值012缩水测试5月23日预测第8弹

最近几天单位事情比较多&#xff0c;回来会比较晚&#xff0c;等忙过这段时间后每天我会恢复到中午左右将预测结果发出来&#xff0c;望各位见谅~今天继续验证测试87823策略&#xff0c;继续完成一个周期&#xff08;十期&#xff09;的测试。下面直接发预测结果~ 首先…

网络模型-Qinq配置与应用

Qinq配置与应用 通过配置Qinq来实现利用公网提供的VLAN100使企业1互通&#xff0c;利用公网提供的VLAN200使企业2互通不同企业之间互相隔离。并通过在连接其它厂商设备的接口上配置修改0in0外层VLAN Tag的TPID值&#xff0c;来实现与其它厂商设备的互通。 一、创建VLAN #在Swi…

基于springboot+vue的学生考勤管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

【Linux】Centos7安装RabbitMQ

【Linux】Centos7安装RabbitMQ 下载 从 rabbitmq 的 GitHub 仓库下载 https://github.com/rabbitmq/rabbitmq-server/releases rabbitmq 是 erlang 语言编写的&#xff0c;需要先安装 erlang https://github.com/rabbitmq/erlang-rpm/releases 安装 使用rz命令上传 erlang 和 …

卡尔曼滤波(2):卡尔曼滤波与递归计算

1. 卡尔曼解决什么问题 比较经典的说法是&#xff0c;卡尔曼滤波适用于任何带有不确定性的系统中。那么我们怎么来理解这种不确定性呢&#xff1f;具体来讲&#xff0c;包含以下几种情况。 当前系统不存在完美的数学表达模型&#xff0c;即不能够通过一些数学方式来表达这个系…

智狐AI论文写作平:提升学术生产力的智能工具,支持私有化部署

在学术研究领域&#xff0c;人工智能&#xff08;AI&#xff09;技术的引入正逐渐改变传统的论文撰写流程。AI论文自动生成工具的出现&#xff0c;为研究人员提供了前所未有的便利与优势。以下是对AI论文自动生成工具带来的便利与优势的深度剖析和解读。 首先&#xff0c;AI论文…

c++设计模式-->访问者模式

#include <iostream> #include <string> #include <memory> using namespace std;class AbstractMember; // 前向声明// 行为基类 class AbstractAction { public:virtual void maleDoing(AbstractMember* member) 0;virtual void femaleDoing(AbstractMemb…

DFE_offset失调校准

1.校准原因 *制造工艺的限制&#xff1a;晶体管在制造过程中&#xff0c;由于工艺的限制&#xff0c;不可能做到完全对称&#xff0c;这导致了输入级晶体管的性能存在微小的差异。 *输入级偏置电流的不对称&#xff1a;输入级晶体管的偏置电流也会存在差异&#xff0c;这也会…

ASP+ACCESS基于B2C电子商务网站设计

摘 要 运用ASP技术结合了Access数据库原理&#xff0c;基于B/S模式我们开发了一个网上购物系统。在我们的系统中&#xff0c;顾客可以很方便的注册成为会员&#xff0c;对商品进行浏览检索&#xff0c;查看商品的详细资料&#xff0c;然后根据各人的喜好购买心仪的商品。系统…

kyuubi/spark3的catalog 多个数据源配置

在使用kyuubi 的时候&#xff0c;有多个集群&#xff0c;老集群上是hive2,新集群hive3 ,想通过一个网关访问多个集群&#xff0c;或者通过jdbc访问mysql&#xff0c;oracle的数据&#xff0c;这样不用来回数据导入导出。spark 支持跨库访问数据&#xff0c;在spark 中提供两种方…

DOS学习-目录与文件应用操作经典案例-xcopy

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 一.前言 xcopy命令是DOS系统中一个强大的文件和目录复制工具&…

SQLServer2022新特性IS [NOT] DISTINCT FROM

SQLServer2022新特性IS [NOT] DISTINCT FROM 1、本文内容 语法参数备注示例 比较两个表达式的相等性&#xff0c;并保证一个 true 或 false 结果&#xff0c;即使一个或两个操作数均为 NULL。 IS [NOT] DISTINCT FROM 这一谓词用于 WHERE 子句和 HAVING 子句的搜索条件中&a…

JAVA内存马查杀

JAVA内存马查杀 客户端请求流程 JAVA内存马类型 Servlet-API listener 内存马 filter内存马 Servlet内存马 特定框架分类 如Spring/Struts2等框架&#xff0c;按照位置分类可以有 interceptor controller 中间件分类 Tomcat的Pipeline&Valve Grizzly的FilterChain…

【东山派Vision K510开发板试用笔记】nncase的安装

概述 最近试用了百问网提供的东山派Vision开发板&#xff0c;DongshanPI-Vision开发板是百问网针对AI应用开发设计出来的一个RSIC-V架构的AI开发板&#xff0c;主要用于学习使用嘉楠的K510芯片进行Linux项目开发和嵌入式AI应用开发等用途。DongshanPI-Vision开发板采用嘉楠公司…

vue打包部署到springboot,通过tomcat运行

tomcat默认端口 8080springboot端口 9132vue 端口 9131 框架 项目是基于SpringBootVue前后端分离的仓库管理系统 后端&#xff1a;SpringBoot MybatisPlus前端&#xff1a;Node.js Vue element-ui数据库&#xff1a;mysql 一. 打包Vue项目 cmd中输入命令 npm run build 后…

Edge浏览器“此页存在问题”解决思路

Edge浏览器显示“此页存在问题”解决思路 大家平时使用Edge浏览器时&#xff0c;是否和我一样会突然出现“此页存在问题”的情况&#xff1f; 经过百度查询后我找了一种情况和解决办法&#xff0c;能够大大减少这类问题的出现。出现“此页存在问题”可能是因为之前使用过软件…