element的el-date-picker时间控件,限制选择范围区间天数并且当前之后的日期不可选

element的el-date-picker时间控件,限制选择范围区间天数并且当前之后的日期不可选

HTML部分代码

       <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
            style="margin-right: 150px;"
        >
        </el-date-picker>

JS代码部分

 data(){
        return {
            nextTime:'',
            dateRange: [],
            pickerMinDate: '',
            pickerOptions: {
                    onPick: ({ maxDate, minDate }) => {
                        this.pickerMinDate = minDate.getTime()
                        if (maxDate) {
                             this.pickerMinDate = ''
                        }
                    },
                    // 限制不能选择今天之后的日期
                    disabledDate: (time) => {
                        let date=new Date();
                        let year=date.getFullYear();
                        let month=date.getMonth()+1;
                        let day=date.getDate();
                        let now=`${year}-${month}-${day} 23:59:59`;
                        let mynow=new Date(now).getTime() // 这一步很关键,我看很多博主发的方法直接是获取的new Date().getTime()这个时间,实际使用并不能满足需求,所以这里需要传入我上面定义的now这个变量值时间
                        if (this.pickerMinDate) {
                            let one = 9 * 24 * 3600 * 1000// 我这里定义的是10天的选择范围区间,这个可以根据实际项目需求更改这个时间范围!
                            let minTime = this.pickerMinDate - one
                            let maxTime = this.pickerMinDate + one
                            return time.getTime() < minTime || time.getTime() > maxTime || time.getTime()>mynow
                        }else{
                            return time.getTime() > mynow
                        }
                            
                    },
            }

        }
    },

实际效果图(当前日期为20231204,所以当前日期以后的不可选)

在这里插入图片描述

代码使用需要看看我代码里面的注释,根据自己的需求更改一下!

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

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

相关文章

【Python动漫系列】名侦探柯南(完整代码)

文章目录 名侦探柯南环境需求完整代码程序分析系列文章名侦探柯南 《名侦探柯南》是由青山刚昌创作的一部侦探漫画,于1994年开始连载,并被改编为动画、电影、游戏等多种形式。故事讲述了高中生侦探工藤新一在破案时被不良组织所毒害,身体缩小成了一个小学生,为了寻找解药并…

编程题:电话号码

&#x1f4d1;打牌 &#xff1a; da pai ge的个人主页 &#x1f324;️个人专栏 &#xff1a; da pai ge的博客专栏 ☁️宝剑锋从磨砺出&#xff0c;梅花香自苦寒来 &#x1f4d1;题目解析 这个题目比较…

SpringTask入门案例

Task cron表达式在线生成网址&#xff1a; https://cron.qqe2.com/ import lombok.extern.slf4j.Slf4j; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component;import java.time.LocalDateTime;/*** 定时任务类*/ Sl…

解决websocket集群的session共享问题

在websocket中&#xff0c;服务端主要使用的是session打交道&#xff0c;但是由于session无法实现序列化&#xff0c;不能存储到redis这些中间存储里面&#xff0c;因此这里我们只能把session存储在本地的内存中&#xff0c;那么如果是集群的话&#xff0c;我们如何实现session…

COMP4121Advanced Algorithms

COMP4121Advanced Algorithms WeChat&#xff1a;yj4399_ Sina Visitor System

OpenHarmony 实现屏幕横竖屏

前言 OpenHarmony源码版本&#xff1a;4.0release 开发板&#xff1a;DAYU / rk3568 一、修改“abilities”中的“orientation”实现横竖屏 当我们应用的Alility继承的是UIAbility时&#xff0c;对应的module.json5中的属性是abilities&#xff08;标识当前Module中UIAbili…

Stable diffusion ai图像生成本地部署教程

前言 本文将用最干最简单的方式告诉你怎么将Stable Diffusion AI图像生成软件部署到你的本地环境 关于Stable Diffusion的实现原理和训练微调请看我其他文章 部署Stable Diffusion主要分为三个部分 下载模型&#xff08;模型可以认为是被训练好的&#xff0c;生成图像的大脑…

全自动洗衣机什么牌子好?内衣洗衣机便宜好用的牌子

随着内衣洗衣机的流行&#xff0c;很多小伙伴在纠结该不该入手一款内衣洗衣机&#xff0c;专门来洗一些贴身衣物&#xff0c;答案是非常有必要的&#xff0c;因为我们现在市面上的大型洗衣机只能做清洁&#xff0c;无法对我们的贴身衣物进行一个高强度的清洁&#xff0c;而小小…

Unity对接后台和加载图片

1、前言 在unity中与后台对接&#xff0c;用await在web端暂时还不支持&#xff0c;所以&#xff0c;协程成为比较好的通用方式&#xff0c;以下适用除post访问外的所有对接 2、对接后台 2.1、安装插件 首先我们需要用到Newtonsoft.dll&#xff0c;如果没有这个.dll的请跟着我…

无人机语音中继电台 U-ATC118

简介 甚高频无线电中继通讯系统使用经过适航认证的机载电台连接数字网络传输模块&#xff0c;通过网络远程控制无缝实现无人机操作员与塔台直接语音通话。无人机操作员可以从地面控制站远程操作机载电台进行频率切换、静噪开关、PTT按钮&#xff0c;电台虚拟面板与真实面板布局…

zabbix配置snmp trap--使用snmptrapd和Bash接收器(缺zabbix_trap_handler.sh文中自取)--图文教程

1.前言 我的zabbix的版本是5.0版本&#xff0c;5.0的官方文档没有使用bash接收器的示例&#xff0c;6.0的官方文档有使用bash接收器的示例&#xff0c;但是&#xff0c;下载文件的链接失效&#xff1f;&#xff01; 这里讲解zabbix-server端配置和zabbix web端配置 2.zabbix-…

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑量化储热的多区域电–热综合能源系统优化调度》

标题 "考虑量化储热的多区域电–热综合能源系统优化调度" 可以分解为几个关键词和短语&#xff0c;我们逐步解读&#xff1a; 考虑量化储热&#xff1a; 考虑&#xff1a; 意味着在解决问题或进行研究时&#xff0c;会综合或纳入特定因素。量化&#xff1a; 将抽象的…

路由策略,gRPC 路由如何实现

目录 一、为啥我们要路由策略&#xff1a; 二、基于gRPC 路由策略 一、为啥我们要路由策略&#xff1a; 我们可以重新回到调用方发起 RPC 调用的流程。在 RPC 发起真实请求的时候&#xff0c;有一个步骤就是从服务提供方节点集合里面选择一个合适的节点&#xff08;就是我们…

【Linux】 OpenSSH_9.3p1 升级到 OpenSSH_9.5p1(亲测无问题,建议收藏)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

node批量修改文件名称

示例目录 在终端中执行即可 node index.js // 第一步&#xff1a;引入 fs 文件系统模块 let fs require("fs"); // 读取目标文件夹名称 const dirName "./img"; // 文件后缀匹配规则 const reg /(?<[.])[a-z]/; // 统一文件名前缀 const fileNam…

SVG-椭圆弧-参数转换-计算公式-标准解读

文章目录 1.简介2.基本参数2.1.椭圆的表达2.2.参数变换2.3.注意事项 3.参考资料4.总结 1.简介 为了与其他路径段表示法保持一致&#xff0c; SVG 路径中的圆弧是根据曲线上的起点和终点定义的。椭圆弧的这种端点参数化。优点是它允许与其它路径一致的语法&#xff0c;其中所有…

22款奔驰GLE450升级香氛负离子 车载香薰功能

相信大家都知道&#xff0c;奔驰自从研发出香氛负离子系统后&#xff0c;一直都受广大奔驰车主的追捧&#xff0c;香氛负离子不仅可以散发出清香淡雅的香气外&#xff0c;还可以对车内的空气进行过滤&#xff0c;使车内的有害气味通过负离子进行过滤&#xff0c;达到车内保持清…

ASP.NET-BS结构的城市酒店入住信息管理系统的设计

2 理论基础 2.1 数据库技术 数据库技术应用中&#xff0c;经常用到的基本概念有&#xff1a;数据库&#xff08;DB&#xff09;、数据库管理系统&#xff08;DBMS&#xff09;、数据库系统&#xff08;DBS&#xff09;、数据库技术及数据模型。 数据库技术是研究数据库的结构、…

第二证券:科创板股票代码?

跟着中国经济的持续展开&#xff0c;出资商场也更加兴盛。科技立异是推动经济展开的基石&#xff0c;因此科技股在近年来的A股商场上备受瞩目。尤其是2019年7月22日&#xff0c;中国科创板正式开板&#xff0c;在A股商场上增添了一份新的亮点。本文将从多个视点深度解析科创板股…

终端安全管理软件是监控软件吗

有些人在后台问&#xff0c;终端安全管理软件是监控软件吗&#xff1f; 先回答&#xff0c;是监控软件。 因为它具有监控的功能&#xff0c;在很大程度上&#xff0c;是可以用来当做监控软件来用的。 终端安全管理软件是一种集中管理终端设备的软件工具&#xff0c;可以在企业…
最新文章