el-date-picker 日期选择限制

el-date-picker 日期选择限制

场景: 选择时间的区间是31天,默认显示最近一周的数据

代码:

<el-date-picker  v-model="due_date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期":picker-options="endDatePicker" value-format="yyyy-MM-dd" @change="dateChangeFun":default-value="personForm.due_date" :clearable="false"></el-date-picker>

重点代码 限制只能选择31天

endDatePicker: {onPick: ({ maxDate, minDate }) => {if (minDate && this.pickerMinDate) {this.pickerMinDate = null;} else if (minDate) {this.pickerMinDate = minDate.getTime();}},disabledDate: (time) => {if (this.pickerMinDate) {const day1 = 30 * 24 * 3600 * 1000;let maxTime = this.pickerMinDate + day1;let minTime = this.pickerMinDate - day1;return (time.getTime() > maxTime ||time.getTime() < minTime ||time.getTime() > Date.now());} else {return time.getTime() > Date.now();}},},

获取最近7天的日期

timeFun() {let year = dayjs().year();let month = dayjs().month() + 1;let day = dayjs().date() - 8;let lastDay = dayjs().date() - 1;let nowYear = year + "-" + month + "-" + lastDay;let lastYear = year + "-" + month + "-" + day;let a = dayjs(lastYear).format("YYYY-MM-DD");let arr = [];arr.push(a, nowYear);this.$set(this.personForm, "due_date", arr);},

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

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

相关文章

多线程多进程的使用场景和常见问题处理

多线程多进程的使用场景 多线程和多进程都是用来实现并发执行的技术&#xff0c;它们可以提高程序的性能和效率。它们各自适用于不同的场景&#xff1a; 多线程的使用场景&#xff1a; I/O密集型任务&#xff1a;当程序需要进行大量的I/O操作&#xff08;如文件读写、网络通…

【PythonRS】基于Python对栅格数据进行归一化(统一量纲至0~1)

有段时间没有更新Python处理栅格、矢量数据了&#xff0c;一部分是因为之前基本上已经把如何使用Python处理地理数据的方法覆盖完了&#xff0c;另一部分是因为最近有其他方面的知识需要学习和巩固。也是赶巧&#xff0c;最近有个项目需要构建模型对影像进行反演需要用到归一化…

Word2Vec详解: CBOW Skip-gram和负采样

Word2Vec&#xff1a; CBOW & Skip-gram 如果是拿一个词语的上下文作为输入&#xff0c;来预测这个词语本身&#xff0c;则是 CBOW 模型。 而如果是用一个词语作为输入&#xff0c;来预测它周围的上下文&#xff0c;那这个模型叫做 Skip-gram 模型。 CBOW 模型 连续词袋模…

简单实现一个自定义loader

webpack定义的loader需要遵循单一功能原则&#xff0c;也就是一个loader只实现一个功能。在实现开发中&#xff0c;我们会直接使用诸如蓝湖等生成的样式&#xff0c;比如 button{background: rgb(255, 85, 46); }但为了考虑主题换肤&#xff0c;我们实现的想要的可能是 butto…

在用Vite开发时静态图片放哪里,才能保证显示,不出现找不到资源

在用Vite开发时静态图片放哪里 在用Vite开发时静态图片&#xff08;资源&#xff09;放哪里呢 &#xff1f; 如果你想直接全部显示的那么请你把静态资源放到public目录下面&#xff0c;这样你一打包所有的静态资源都会放到打包根目录下。但是此时你在项目中引用的地址一定要是…

OM6621选型指南详细对比应用蓝牙遥控智能穿戴游戏手柄

昂瑞微蓝牙OM6621系列对比选型指南 OM6621EM和OM6621ED性能特点 超低功耗蓝牙SOC精简BLE5.1协议栈主频64Mhz&#xff0c;40KB RAM集成红外线收发电路主要应用在语音遥控、鼠标、水表等 功能特点 功耗&#xff1a;1秒连接平均电流&#xff1a;11uA峰值电流&#xff1a;TX0dBm…

Vue 监听状态 watch 与监听状态 watchEffect

监听状态 watch watch 函数用于监听响应式数据的变化。 使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型)。 import { ref, watch } from "vue" export default {setup() {const text ref("")watch(text, (current, previous) > {conso…

javascript2

文章目录 一、 内置对象1&#xff09; 对象2&#xff09; Array 数组1. 创建2. 特点3. 属性和方法4. 二维数组 3&#xff09;String 对象1. 创建2. 特点3. 属性4. 方法 4) Math 对象1. 定义2. 属性3. 方法 5&#xff09;日期对象1. 创建日期对象2. 日期对象方法 1. 创建日期对象…

结构体--高考数组

高考数组 高考数组 题意 求给定N组数组的平均值并输出最大的两个 思路 先求出其平均值再结构体进行比较&#xff0c;输出前两个最大值 算法一&#xff1a;结构体 实现步骤 定义结构体&#xff0c;进行平均值的比较&#xff0c;给数据定义下标&#xff0c;sort进行递增排序&a…

c++ 重写 重构 重载

特性重写&#xff08;Override&#xff09;重构&#xff08;Refactoring&#xff09;重载&#xff08;Overloading&#xff09;定义在派生类中提供与基类同名同参数的新方法实现改进代码内部结构但不改变外在行为在同一作用域内创建多个参数列表不同的同名函数目的实现多态&…

(2)llvm解析器和抽象语法树

解析器的输出是抽象语法树 对于数字字面量&#xff0c;创造了一个实例&#xff0c;并捕捉 变量捕捉函数名&#xff1b;二元表达式捕捉运算符&#xff1b;函数调用捕捉函数名和函数调用参数 函数原型和函数定义 构建语法树 getNextToken会从输入流里拿一个token&#xff0c;Cur…

克魔助手:方便查看iPhone应用实时日志和奔溃日志工具

查看ios app运行日志 摘要 本文介绍了一款名为克魔助手的iOS应用日志查看工具&#xff0c;该工具可以方便地查看iPhone设备上应用和系统运行时的实时日志和奔溃日志。同时还提供了奔溃日志分析查看模块&#xff0c;可以对苹果奔溃日志进行符号化、格式化和分析&#xff0c;极…

MSVC++ 编译 module std

环境&#xff1a;windows 10 19045.xxxx 只安装了MSVC C 工具链和一个版本的SDK&#xff0c;SDK版本建议选一个和本机系统匹配的。 cd %USERPROFILE%\source\repos\STLModules mkdir x86 mkdir x64 打开“x86 Native Tools Command Prompt for VS 2022”控制台&#xff0c;…

【mac-m1 docker 安装upload-labs靶场】

1.搜索upload-labs docker search upload-labs 2.下载upload-labs docker pull c0ny1/upload-labs 3.启动 docker run -it -d --name uploadlabs -p 80:80 c0ny1/upload-labs --platform linux/amd64 4.访问127.0.0.1:80

java设计模式学习之【备忘录模式】

文章目录 引言备忘录模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用备忘录示例代码地址 引言 想象一下&#xff0c;你正在编辑一篇重要的文档&#xff0c;突然你意识到最近的一些更改实际上破坏了文档的结构。幸运的是&#xff0c;你的文本编辑器允许你撤…

哈希桶的模拟实现【C++】

文章目录 哈希冲突解决闭散列 &#xff08;开放定址法&#xff09;开散列 &#xff08;链地址法、哈希桶&#xff09;开散列实现&#xff08;哈希桶&#xff09;哈希表的结构InsertFindErase 哈希冲突解决 闭散列 &#xff08;开放定址法&#xff09; 发生哈希冲突时&#xf…

FreeBSD下安装Jenkins(软件测试集成工具)记录

简要介绍Jenkins 简而言之&#xff0c;Jenkins 是领先的开源自动化服务器。它使用 Java 构建&#xff0c;提供了 1,800 多个插件来支持几乎任何事情的自动化&#xff0c;因此人类可以将时间花在机器无法完成的事情上。 主要目的&#xff1a; 持续、自动地构建/测试软件项目。…

【MyBatis-Plus】进阶之乐观锁、悲观锁逻辑删除分页和查询构造器的使用

目录 一、乐观锁、悲观锁 1、什么是乐观锁和悲观锁 ①乐观锁&#xff08;Optimistic Locking&#xff09;: ②悲观锁&#xff08;Pessimistic Locking&#xff09;: ③实现方式 2、乐观锁和悲观锁的区别 ①乐观锁&#xff08;Optimistic Locking&#xff09; ②悲观锁&…

MySQL ORDER BY(排序) 语句-读取的数据进行排序

MySQL ORDER BY(排序) 语句 我们知道从 MySQL 表中使用 SELECT 语句来读取数据。 如果我们需要对读取的数据进行排序&#xff0c;我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段哪种方式来进行排序&#xff0c;再返回搜索结果。 MySQL ORDER BY(排序) 语句可以…