基于element-ui 日期选择器el-date-picker, 即对日期做区间限制

需求:

有时候需求会让我们对日期选择器做限制,即控制最多可跨越多少个月份,其中涉及到不同年份该如何计算。

HTML:

<el-date-pickerv-model="timePeriod"type="monthrange"value-format="yyyyMM"format="yyyyMM"range-separator="至"start-placeholder="开始月份"end-placeholder="结束月份"
>
</el-date-picker>

功能代码:

this.timePeriod = ['201402','201409'] //演示数据let stagingList = []if(this.timePeriod && this.timePeriod.length >0){let time = new Date().getFullYear().toString()let lists = []let yearComparison_1 = this.timePeriod[0].substr(0,time.length)let yearComparison_2 = this.timePeriod[1].substr(0,time.length)let compareTheMonthsTo_1 = this.timePeriod[0].substr(time.length,2)let compareTheMonthsTo_2 = this.timePeriod[1].substr(time.length,2)let monthlyDifference = compareTheMonthsTo_2 - compareTheMonthsTo_1if (yearComparison_1 == yearComparison_2) {if(monthlyDifference == 0){let deduplication = []for (let k = 0; k < this.timePeriod.length; k++) {if (deduplication.indexOf(this.timePeriod[k]) === -1) {deduplication.push(this.timePeriod[k])}}lists = deduplication} else if(monthlyDifference > 0){let incrementalStorage = []for (let j = 0; j < monthlyDifference + 1; j++){let moon = (compareTheMonthsTo_1 * 1)  + jif(moon < 10){moon = "0" + moon;}incrementalStorage.push(yearComparison_1 + moon)}lists = incrementalStorage}}else if(yearComparison_1 != yearComparison_2){let length_1 = 12 -compareTheMonthsTo_1let storingData1 = []let length_2 = compareTheMonthsTo_2 * 1let storingData2 = []let storingData3 = []for (let i = 0; i < length_1 + 1; i++) {let moon_1 = (compareTheMonthsTo_1 * 1)  + iif(moon_1 < 10){moon_1 = "0" + moon_1;}storingData1.push(yearComparison_1 + moon_1)}let th = yearComparison_2 - yearComparison_1if(th > 1){var newYearSEve = []let N = yearComparison_1for (let index = 1; index < th; index++) {N = (N * 1) + indexfor (let q = 1; q < 13; q++) {if(q < 10){q = "0" + q;}newYearSEve.push(N.toString() + q)}}storingData1.push(...newYearSEve);}for (let j = 0; j < length_2; j++) {let moon_2 = j + 1if(moon_2 < 10){moon_2 = "0" + moon_2;}storingData2.push(yearComparison_2 + moon_2)}storingData3 = storingData1.concat(storingData2)lists = storingData3  }stagingList = lists}if (stagingList.length > 13) {this.$message.warning('账期至多只可选择13个月!')return}

打印结果:

console.log(stagingList);

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

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

相关文章

鸿蒙Harmony编程开发:HTTPS服务端证书四种校验方式

如果你还是使用HttpRequest的话&#xff0c;答案是否定的。但是&#xff0c;鸿蒙开发者很贴心的推出了远场通信服务&#xff0c;可以使用rcp模块的方法发起请求&#xff0c;并且在请求时指定服务端证书的验证方式&#xff0c;关键点就在SecurityConfiguration接口上&#xff0c…

Kafka·概述

概览 Producer 生产者发送消息给broker&#xff0c;并不是生成一条消息后立刻发送&#xff0c;而是积攒多条后&#xff0c;批量发送到broker。可以通过配置参数batch.size&#xff08;单位字节&#xff09;调整积攒多少后发送 Consumer Topic 消息的分类 当Producer发送指定…

OpenAI 重回巅峰:ChatGPT-4O 最新模型超越谷歌 Gemini 1.5,多项测试夺冠!

谷歌上周发布的Gemini 1.5 Pro模型&#xff0c;在LMSYS办的聊天机器人竞技场Chatbot Arena中获得第一名。但是&#xff0c;OpenAI迅速反应&#xff0c;推出了最新的chatgpt-4o-latest模型&#xff0c;重新夺回了冠军头衔。 chatgpt-4o-latest模型简介 OpenAI最近推出了名为gpt-…

Unity教程(十二)视差背景

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…

C语言-从键盘输入一个字符串,将其中的小写字母全部转换成大写字母,然后输出到一个磁盘文件test中保存,输人的字符串以“!”结束

题目要求&#xff1a; 从键盘输入一个字符串,将其中的小写字母全部转换成大写字母,然后输出到一个磁盘文件test中保存,输人的字符串以"!”结束 1.实现程序&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h> int main() {FILE* fp fopen("…

鸿蒙内核源码分析(用户态锁篇) | 如何使用快锁Futex(上)

快锁上下篇 鸿蒙内核实现了Futex&#xff0c;系列篇将用两篇来介绍快锁&#xff0c;主要两个原因: 网上介绍Futex的文章很少&#xff0c;全面深入内核介绍的就更少&#xff0c;所以来一次详细整理和挖透。涉及用户态和内核态打配合&#xff0c;共同作用&#xff0c;既要说用户…

深入理解滑动窗口算法及其经典应用

文章目录 什么是滑动窗口&#xff1f;经典题型分析与讲解**1. 长度最小的子数组****2. 无重复字符的最长子串****3. 最长重复子数组****4. 将x减到0的最小操作数**5. 水果成篮 (LeetCode 904)6. 滑动窗口最大值 (LeetCode 239)7. 字符串中的所有字母异位词 (LeetCode 剑指 Offe…

区块链基础通识(1)——分布式系统的共识问题

分布式系统 我们最初了解区块链的时候&#xff0c;很多人会形容这个区块链是一个“分布式的不可篡改账本”&#xff0c;这是一个很形象的说法&#xff0c;但是我认为更为准确的形容是“所有节点共同维护的状态机”。为什么分布式和区块链不能划等号呢&#xff1f; 两种常见的…

数字身份革命:探索Web3对个人隐私的保护

在数字化时代&#xff0c;个人隐私和数据保护成为越来越重要的话题。随着Web3的兴起&#xff0c;这一领域正在经历一场深刻的变革。Web3不仅仅是技术的演进&#xff0c;更是对个人隐私保护的一次革命性革新。本文将探讨Web3如何通过去中心化技术重新定义数字身份&#xff0c;并…

npm install报错,解决记录:11个步骤诊断和解决问题

在处理npm install报错时&#xff0c;可以遵循以下步骤来诊断和解决问题&#xff1a; 查看错误信息&#xff1a; 错误信息通常会给出问题的线索&#xff0c;例如依赖包版本冲突、网络问题、权限问题等。 更新npm和Node.js&#xff1a; 首先尝试更新npm和Node.js到最新版本&…

电子电气架构--- 智能汽车电子架构的核心诉求

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…

Windows平台SDKMAN工具使用

为方便jvm生态的软件版本管理&#xff0c;可以使用sdkman工具来安装和管理诸如java、gradle等软件的当前使用版本。尤其是大多数程序员都是在windows平台开发&#xff0c;团队开发通常都需要统一的jvm相关软件的版本。这里给大家演示下windows平台如何安装和使用sdkman来实现这…

安全架构设计

目录 1安全需求分析 2安全架构原则 3安全架构方法 系统架构完整实例_系统架构设计案例-CSDN博客 1安全概述 系统安全架构设计&#xff0c;主要包含&#xff1a;物理安全&#xff0c;网络安全&#xff0c;系统安全&#xff0c;数据安全&#xff0c;应用安全。 完整性(Integ…

内存管理篇-05物理页面的迁移类型migratetype

本节内容依旧是对上节课伙伴系统的补充&#xff0c;主要介绍了新版伙伴系统的页面迁移相关的内容 为什么要引入页面迁移类型&#xff1f;新版本伙伴系统针对老版本的伙伴系统的升级改进。主要优化memory compaction内存碎片整理的过程。 页面迁移实际上就是伙伴系统中free_area…

构建高效的串行任务执行器:SerialExecutor深度解析

本文主要介绍怎么去实现一个支持串行执行任务的SerialExecutor执行器 摘要 在复杂的异步编程中&#xff0c;有时我们需要确保任务以串行的方式执行&#xff0c;以维护任务间的依赖关系或顺序。SerialExecutor 是一个自定义的执行器&#xff0c;它封装了 Java 的 Executor 接口…

leetcode 3 无重复字符的最长子串

leetcode 3 无重复字符的最长子串 正文普通解法双指针 正文 普通解法 重点观察示例 3。本题重点是创建一个动态区间&#xff0c;然后判断位于这个动态区间之外的字符是否被包含在这个动态区间范围内。并且对于 s 长度小于 1 的情况要重点进行讨论。 class Solution:def lengt…

day38.动态规划+MySql数据库复习

844.比较含退格的字符串 给定 s 和 t 两个字符串&#xff0c;当它们分别被输入到空白的文本编辑器后&#xff0c;如果两者相等&#xff0c;返回 true 。# 代表退格字符。 注意&#xff1a;如果对空文本输入退格字符&#xff0c;文本继续为空 思路:定义两个栈&#xff0c;将字符…

后端完成api顺序

contoroller层 Service层 点击getById&#xff0c;如果没有getById函数就先声明一个 然后完成函数体 db层 数据访问对象.数据库方法 //作用是提供对数据库中特定表的操作方法

20. elasticsearch进阶_数据可视化与日志管理

20. 数据可视化 本章概述一. `elasticsearch`实现数据统计1.1 创建用户信息索引1.1.1 控制台创建`aggs_user`索引1.1.2 `aggs_user`索引结构初始化1.1.3 `aggs_user`索引的`EO`对象1.1.4 用户类型枚举1.1.5 数据初始化1.2 内置统计聚合1.2.1 `terms`与`date_histogram``terms``…

C语言基础(十五)

指针的使用&#xff1a; 测试代码1&#xff1a; #include <stdio.h> // 标准的 main 函数声明&#xff0c;包括可选的 envp 参数 int main(int argc, char *argv[], char *envp[]) { // argc 命令行参数的数量&#xff08;包括程序名&#xff09; // argv 指向字…