el-date-picker组件设置时间范围限制

需求:

如图所示,下图为新增的一个弹层页面,同时有个需求,日期选择需要限制一个月的时间范围(一月默认为30天):

查看官方文档我们需要主要使用到如下表格的一些东西:

参数说明类型可选值默认值
shortcuts设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表Object[]
disabledDate设置禁用状态,参数为当前日期,要求返回 BooleanFunction
cellClassName设置日期的 classNameFunction(Date)
firstDayOfWeek周起始日Number1 到 77
onPick选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效Function({ maxDate, minDate })

下方为使用的代码:

<el-col :span="24">
            <el-form-item label="选择日期:"  class="date_box">
              <span class="reqicon">*</span>
                <el-date-picker
                style="width: 300px"
                v-model="date"
                type="daterange"
                @change="datechange"

                :picker-options="pickerOptions"  ++此处增加

                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                >
            </el-date-picker>
            <i class="el-icon-date data_icon"></i>
            <span class="reqtitle" v-show="isreq">请选择日期</span>
          </el-form-item>
          </el-col>

 在data中新增:

 data() {
    return {
      rules: {
        branchNo: [
          {
            required: true,
            message: "请选择平台仓库",
            trigger: "change",
          },
        ]
      },
      startPickerTime:'',  //第一次选中的值
      pickerOptions:{
       //选择第一次时间时触发
        onPick:obj=>{
     //obj对象格式为 {
     // "minDate": "2023-12-31T16:00:00.000Z格式",
    // "maxDate": "2024-01-19T16:00:00.000Z"
   //}
          this.startPickerTime=new Date(obj.minDate).getTime()
        },
 disabledDate:time=>{      //通过disabledDate设置某个时间范围是否禁用可选
          if(this.startPickerTime){
          //时间范围(我这为30天)
           const timeFrame=24*3600*1000*30  
          //minFrame为最小选中范围
           let minFrame=this.startPickerTime-timeFrame 
          //maxFrame为最大选中的范围
           let maxFrame=this.startPickerTime+timeFrame 
           let pickerType=time.getTime()>maxFrame||time.getTime()<minFrame
          //pickerType为布尔值,返回false或true;
           return pickerType       
          }
        }
      }
    };
  },

效果如下图所示:

未选中:

第一次选中:

当前选中的时间为16号,最大范围为2月15号,范围外的时间已经禁用了

 最小范围为上一年的12月17号

 结束,希望对大家有所帮助哦!

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

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

相关文章

java应用CPU过高查找原因

用top查到占用cpu最高的进程pid 根据进程ID找到占用CPU高的线程 ps -mp 60355 -o THREAD,tid | sort -r 用 printf "%x \n" 将tid换为十六进制&#xff1a;xid printf "%x \n" 6036 根据16进制格式的线程ID查找线程堆栈信息 jstack 60355 |grep ebcb -A…

[NISACTF 2022]babyserialize

[NISACTF 2022]babyserialize 题目做法及思路解析&#xff08;个人分享&#xff09; 题目平台地址&#xff1a;NSSCTF | 在线CTF平台 一、题目代码 查看分析代码&#xff0c;寻找漏洞点&#xff08;题目中注释为个人思路标注&#xff0c;实际代码中没有&#xff09; …

uniapp 使用canvas制作柱状图

效果图&#xff1a; 实现思路&#xff1a; 1、通过展示数据计算需要画几根柱子&#xff1b; 2、通过组件宽度、高度计算出每根柱子的宽度及高度&#xff1b; 3、for循环依次绘制每根柱子&#xff1b; 4、绘制柱子时&#xff0c;先绘制顶部百分比、value值&#xff0c;再绘制柱子…

1.机器学习-机器学习算法分类概述

机器学习-机器学习算法分类概述 个人简介机器学习算法分类&#xff1a;监督学习、无监督学习、强化学习一监督学习1. 监督学习分类任务举例&#xff1a;1.1 特征1.2 标签 二无监督学习1.关键特点2.应用示例3.常见的无监督学习算法 三强化学习1.定义2.示例场景 四机器学习开发流…

HarmonyOS应用开发者高级认证试题库(鸿蒙)

目录 考试链接&#xff1a; 流程&#xff1a; 选择&#xff1a; 判断 单选 多选 考试链接&#xff1a; 华为开发者学堂华为开发者学堂https://developer.huawei.com/consumer/cn/training/dev-certification/a617e0d3bc144624864a04edb951f6c4 流程&#xff1a; 先进行…

springboot整合websocket后启动报错:javax.websocket.server.ServerContainer not available

一、场景 Springboot使用ServerEndpoint来建立websocket链接。引入依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>配置Websocket Confi…

java SECS管理系统 将逐步推出 SECS 客户端(Passive) 管理系统 SECS快速开发平台 springboot secs开发平台

SECS管理系统 这是一套SECS客户端(Passive)&#xff0c;可以直接连接PLC设备,支持Modbus、三菱MC、欧姆龙Fine、OPC-UA、西门子S7设备等通信。 企业已经有了EAP软件&#xff0c;但是设备没有SECS通信功能&#xff0c;这时候可以使用这套框架&#xff0c;直接连接设备&#xff…

maven环境搭建(打包项目)

Maven:直观来讲就是打包写好的代码封装 Apahche 软件基金会&#xff08;非营业的组织&#xff0c;把一些开源软件维护管理起来&#xff09; maven apahce的一个开宇拿项目&#xff0c;是一个优秀的项目构建&#xff08;管理工具&#xff09; maven 管理项目的jar 以及jar与j…

2019年江苏省职教高考计算机技能考试——一道改错题的分析

题目&#xff1a;函数将str字符串中的5个数字字符串转换为整数&#xff0c;并保存在二维数组m的最后一行&#xff0c;各元素为3、-4、16、18、6。并经函数move处理后&#xff0c;运行结果如下&#xff1a; 18 6 3 -4 16 16 18 6 3 -4 -4 16 …

介绍一个强大的免费开源.net反编译工具

dnSpy dnSpy 是一个用C#开发&#xff0c;开源的调试器和.NET 汇编编辑器。 即使您没有任何可用的源代码&#xff0c;也可以使用它来编辑和调试程序&#xff0c;并可以把代码导出成.net工程。

MySQL表的内连和外连

文章目录 前言一、表的内连接和外连接内连接外连接左外连接右外连接 使用场景 前言 一、表的内连接和外连接 表的连接分为内连接和外连接。 内连接 内连接实际上就是利用where子句对两种表形成的笛卡儿积进行筛选&#xff0c;我们前面学习的查询都是内连接&#xff0c;也是在…

【Java】十年老司机转开发语言,新小白从学习路线图开始

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《Java》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握…

LINUX命令:tr cut sort uniq

目录 一.tr 1.替换 2.删除tr -d 3.压缩tr -t 二.cut 1.提取所需要的列 2.延伸——磁盘剩余空间不足发起警告 三.sort -t 指定分隔符 -k 指定列排序 四.uniq uniq压缩连续的字符 uniq -c 压缩并统计连续的字符数据信息 一.tr 1.替换 2.删除tr -d 3.压缩tr -t 二.c…

Miracast手机高清投屏到电视(免费)

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Miracast概述 Miracast是一种无线显示标准&#xff0c;它允许支持Miracast的设备之间通过Wi-Fi直接共享音频和视频内容&#xff0c;实现屏幕镜像或扩展显示。这意味着你可以…

vscode无法自动补全

前提&#xff1a;安装c/c插件 c/c插件功能非常强大&#xff0c;几乎能满足日常编码过程中常用的功能&#xff1b;因此也包含自动补全的功能&#xff0c;开启方法如下&#xff1a; 文件->首选项->设置&#xff1a; 扩展->c/c->Intellisense&#xff0c;找到Intell…

工业企业能源管理平台,可以帮助企业解决哪些方面的能源问题?

随着全球工业化进程的加快&#xff0c;工业企业在生产经营过程中消耗的能源也越来越庞大。能源成本的上升和环境保护的压力使得工业企业对能源管理的重要性有了深刻的认识。为了提高能源利用效率、降低能源消耗、减少环境污染&#xff0c;工业企业在能源管理方面迫切需要一套规…

JS逆向实战案例2——某房地产token RSA加密

说明&#xff1a;仅供学习使用&#xff0c;请勿用于非法用途&#xff0c;若有侵权&#xff0c;请联系博主删除 作者&#xff1a;zhu6201976 一、 反爬分析 url1&#xff1a;aHR0cDovL3pmY2ouZ3ouZ292LmNuL3pmY2ovZnl4eC94a2I/c1Byb2plY3RJZD05MzBlMDQ0MmJjNjA0MTBkYTgzNzQ0MmQ…

将PDF转换为二维码,实现手机端无缝分享的新体验

在移动互联网时代&#xff0c;手机已经成为我们日常生活和工作中不可或缺的工具。然而&#xff0c;直接在手机上分享PDF文件可能会面临格式兼容性、文件大小限制以及传输速度慢等问题。为此&#xff0c;Maifile.cn提供了一种创新的解决方案——将PDF转换为二维码&#xff0c;让…

P9842 [ICPC2021 Nanjing R] Klee in Solitary Confinement 题解(SPJ!!!)

[ICPC2021 Nanjing R] Klee in Solitary Confinement 题面翻译 给定 n , k n,k n,k 和一个长为 n n n 的序列&#xff0c;你可以选择对区间 [ l , r ] [l, r] [l,r] 的数整体加上 k k k&#xff0c;也可以不加。最大化众数出现次数并输出。 题目描述 Since the travele…

Python密码本连接wifi

有时候我们会忘记自己的Wi-Fi密码&#xff0c;或者需要连接某个Wi-Fi网络以满足合法需求。本文将介绍如何使用Python编程语言编写一个简单的连接Wi-Fi的程序。 一、密码本准备 在进行wifi猜测时&#xff0c;其实就是列出各种可能的密码&#xff0c;用来尝试去访问目标wifi&…