el-date-picker限制选择7天内禁止内框选择
需求:elementPlus时间段选择框需要满足:①最多选7天时间。②不能手动输入。
<el-date-picker v-model="timeArrange" @focus="timeEditable" :editable="false" type="datetimerange" range-separator="至" start-placeholder="开始日期" value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledDateFn" @calendar-Change="calendarChange" end-placeholder="结束日期" style="width: 100%"
/>
①、限制最多选7天时间问题
加属性 :disabled-date="disabledDateFn" 和 @calendar-Change="calendarChange"
const disabledDateFn = (time: any) => {// 如何选择了一个日期if (choiceDate.value) {// 7天的时间戳const one = 6 * 24 * 3600 * 1000;// 当前日期 - one = 7天之前const minTime = choiceDate.value - one;// 当前日期 + one = 7天之后const maxTime = choiceDate.value + one;return (time.getTime() < minTime ||time.getTime() > maxTime// 限制不能选择今天及以后// || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now());} else {// 如果没有选择日期,就要限制不能选择今天及以后// return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();}
}const calendarChange = (obj: any) => {const minDate = obj[0]const maxDate = obj[1]// 把选择的第一个日期赋值给一个变量。choiceDate.value = minDate.getTime();// 如何你选择了两个日期了,就把那个变量置空if (maxDate) choiceDate.value = null;
}
效果如下:
②限制手动输入问题。
这里有内外两个输入框需要限制
外部 的可以直接用属性 :editable="false" 限制
内部 的这里需要通过 @focus="timeEditable" 把 input 内框输入都变成只读状态。
//组件禁止组件里面的input输入值
const timeEditable = ()=>{nextTick(() => {let els = document.querySelectorAll('.el-input__wrapper input');for (var i = 0; i <= els.length - 1; i++) {els[i].setAttribute('readonly', 'readonly');}})
}
这样需求就实现了
相关文章:

el-date-picker限制选择7天内禁止内框选择
需求:elementPlus时间段选择框需要满足:①最多选7天时间。②不能手动输入。 <el-date-picker v-model"timeArrange" focus"timeEditable" :editable"false" type"datetimerange" range-separator"至&qu…...

Navicat 技术指引 | 适用于 GaussDB 分布式的调试器
Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…...

人工智能导论习题集(3)
第五章:不确定性推理 题1题2题3题4题5题6题7题8 题1 题2 题3 题4 题5 题6 题7 题8...

2023一起益企广东省中小企业数字化赋能活动(深圳站)成功举办
12月12日,由广东工业和信息化厅指导,广东省中小企业服务中心、深圳市中小企业服务局主办,深圳联通承办的2023年“一起益企”广东省中小企业数字化赋能专项对接志愿服务活动(深圳站)在深圳成功举办。 本次活动涵盖中小企…...

MySQL之创建表
创建emp表 #创建表的练习 -- 字段 属性 -- Id 整形 -- name 字符型 -- sex 字符型 -- birthday 日期型 -- entry_date 日期型 -- job 字符型 -- Salary 小数型 -- resume 文本型 CREATE TABLE emp(id INT,name VARCHAR(32),sex CHAR(1),birthday DATE,entry_date DAT…...
选择大于努力-鸿蒙开发应用不适合当前企业的现状态(头部应用除外)推荐一套款平台框架可以写安卓iOS 鸿蒙为企业开源节流
1。从目前各种app平台以及个人原生安卓开发走来的经验看来,原生app开发存在一下问题也是国内现状的情况 1.开发成本高比如原生安卓你需要掌握一种语言Java或者kotlin ios开发需要oc 或者swift 2.app开发出来推广成本,一般企业吃不消 3.开发维护成本好…...

2023.12.12 关于 Java 反射详解
目录 基本概念 定义 用途 反射相关的类 反射基本原理 Class 类中的相关方法 常用获得类相关的方法 常用获得类中属性相关的方法 常用获得类中构造器相关的方法 常用获得类中方法相关的方法 实例理解 反射优缺点 基本概念 定义 Java 的反射(reflection&a…...

【Qt QML入门】Image
Image类型显示一个图像。 使用source属性将图像的源指定为URL。图像可以以Qt支持的任何标准图像格式提供,包括位图格式,如PNG和JPEG,以及矢量图形格式,如SVG。 如果没有指定宽度和高度属性,图像将自动使用加载图像的大…...

Spark编程入门
1.8 Spark编程入门 1.8.1 通过IDEA创建Spark工程 ps:工程创建之前步骤省略,在scala中已经讲解,直接默认是创建好工程的 导入Pom文件依赖 <!-- 声明公有的属性 --><properties><maven.compiler.source>1.8</maven.compiler.source><maven.compiler…...

JVM 内存分析工具 Memory Analyzer Tool(MAT)的深度讲解
目录 一. 前言 二. MAT 使用场景及主要解决问题 三. MAT 基础概念 3.1. Heap Dump 3.2. Shallow Heap 3.3. Retained Set 3.4. Retained Heap 3.5. Dominator Tree 3.6. OQL 3.7. references 四. MAT 功能概述 4.1. 内存分布 4.2. 对象间依赖 4.3. 对象状态 4.4…...

浅谈 USB Bulk 深入浅出 (3) - USB Bulk 装置传输的注意事项
来源:大大通 作者:冷氣團 1 USB Bulk 是什么 USB 是即插即用使用差动信号的装置界面,是以 端点 ( Endpoint ),做为传输装置的输出入端,透过不同的端点 ( Endpoint ) 和模式,来进行与装置的沟通ÿ…...

c语言结构体调用格式与对齐
1.声明形式: struct 结构体名字 { 结构体成员 }结构体变量名; 2.赋值方法 3.结构体对齐: 1.起始偏移量:默认结构体第一个元素对齐0起始偏移量,第一个元素占一个字节,此时偏移量为1. 2.标准数ÿ…...

服务器常用命令介绍和负载监控的工具插件推荐
先赞后看,养成习惯!!!❤️ ❤️ ❤️ 码字不易,如果喜欢可以关注我哦! 如果本篇文章对你有所启发,欢迎访问我的个人博客 命令 服务器相关 5个常用命令 top Top命令不仅显示了当前内核服务的…...

linux 防火墙systemctl (个人笔记)
查看 systemctl status firewalld 开启 systemctl start firewalld 关闭 systemctl stop firewalld.service 查看所有 firewall-cmd --zonepublic --list-ports 开放端口:// --permanent 永久生效,没有此参数重启后失效 firewall-cmd --zonepublic --add-port9527/…...

处理器中store指令的处理
对于向存储器中保存数据的store指令来说,它在顺利离开流水线之前是不允许改变处理器状态的,只有等到它退休(retire)的时候,才允许将它携带的数据写到D-Cache中在此之前,store指令即使计算完毕,也会将结果暂存在一个缓存中…...

杨辉三角形-第11届蓝桥杯选拔赛Python真题精选
[导读]:超平老师的Scratch蓝桥杯真题解读系列在推出之后,受到了广大老师和家长的好评,非常感谢各位的认可和厚爱。作为回馈,超平老师计划推出《Python蓝桥杯真题解析100讲》,这是解读系列的第17讲。 杨辉三角形&#…...

我们一起做过的SPA——Nuxt.js介绍
Nuxt.js 1 我们一起做过的SPA SPA(single page web application)单页 Web 应用,Web 不再是一张张页面,而是一个整体的应用,一个由路由系统、数据系统、页面(组件)系统等等,组成的应…...

java导出word使用模版与自定义联合出击解决复杂表格!
1. 看一下需要导出什么样子的表格 如图所示,这里的所有数据行都是动态的,需要根据查询出来的数据循环展示。 如果只是这样的话,使用freemarker应该都可以搞定,但是他一列中内容相同的单元格,需要合并。 这对于表格样式…...
GO设计模式——9、过滤器模式(结构型)
目录 过滤器模式(Filter/Criteria Pattern) 代码实现 过滤器模式(Filter/Criteria Pattern) 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,…...
fastadmin 导出
php 接收数据 set_time_limit(0);ini_set(memory_limit, -1);$ids $this->request->post(ids);$filter $this->request->post(filter);$op $this->request->post(op);$search $this->request->post(search);$whereIds $ids all ? 11 : [id >…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...

【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程(6.3)
目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 编辑编辑 UDP的特征 socke函数 bind函数 recvfrom函数(接收函数) sendto函数(发送函数) 五、网络编程之 UDP 用…...

rknn toolkit2搭建和推理
安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 ,不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源(最常用) conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...