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

news2025/1/11 16:48:05

需求:

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

HTML:

<el-date-picker
   v-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_1

          if (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)  + j
                    if(moon < 10){
                      moon = "0" + moon;
                    }
                    incrementalStorage.push(yearComparison_1 + moon)
                  }
                  lists = incrementalStorage
              }
          }else if(yearComparison_1 != yearComparison_2){
              let length_1 = 12 -compareTheMonthsTo_1
              let storingData1 = []
              let length_2 = compareTheMonthsTo_2 * 1
              let storingData2 = []
              let storingData3 = []
              for (let i = 0; i < length_1 + 1; i++) {
                let moon_1 = (compareTheMonthsTo_1 * 1)  + i
                if(moon_1 < 10){
                  moon_1 = "0" + moon_1;
                }
                storingData1.push(yearComparison_1 + moon_1)
              }

              let th = yearComparison_2 - yearComparison_1
              if(th > 1){
                  var newYearSEve = []
                  let N = yearComparison_1
                  for (let index = 1; index < th; index++) {
                    N = (N * 1) + index
                    for (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 + 1
                if(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.coloradmin.cn/o/2064988.html

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

相关文章

Linux系统之部署俄罗斯方块网页小游戏(三)

Linux系统之部署俄罗斯方块网页小游戏(三) 一、小游戏介绍1.1 小游戏简介1.2 项目预览二、本次实践介绍2.1 本地环境规划2.2 本次实践介绍三、检查本地环境3.1 检查系统版本3.2 检查系统内核版本3.3 检查软件源四、安装Apache24.1 安装Apache2软件4.2 启动apache2服务4.3 查看…

【CANoe使用大全】——cdd导入CANoe流程详解

&#x1f64b;‍♂️【CANoe使用大全】系列&#x1f481;‍♂️点击跳转 文章目录 1.1.CDD导入1.1 CDD文件导入流程 2. CDD文件导后配置2.1.协议配置2.2.寻址方式配置2.3.0x27 解密DLL导入2.4.诊断ID配置 3.导入效果4.CDD操作台使用4.1.指令发送 5.Fault Memory5.1 0x19 045.2…

解释图像的边缘检测算法中的Canny算法

Canny 算法是图像处理领域中一种经典的边缘检测方法&#xff0c;由 John F. Canny 在 1986 年提出。Canny 算法以其高效、可靠的边缘检测效果在图像处理和计算机视觉领域广泛应用。它具有良好的噪声抑制能力、精确的边缘定位能力以及单像素宽度的边缘输出特性。 Canny 边缘检测…

TIM输出比较之PWM驱动LED呼吸灯应用案例

文章目录 前言一、应用案例演示二、电路接线图三、应用案例代码四、应用案例分析4.1 基本思路4.2 相关库函数介绍4.3 初始化PWM模块4.3.1 RCC开启时钟4.3.2 配置时基单元4.3.3 配置输出比较单元4.3.4 配置GPIO4.3.5 运行控制 4.4 PWM输出模块4.5 主程序 前言 提示&#xff1a;…

无人机培训与装配维修技术详解

一、无人机基础理论 无人机&#xff0c;即无人驾驶航空器&#xff0c;凭借其灵活性、高效性和广泛应用性&#xff0c;已成为现代科技领域的热点之一。在学习无人机培训与装配维修技术之前&#xff0c;掌握无人机的基础理论是必不可少的。这包括但不限于&#xff1a; 1. 无人机…

Alpaca 汉化版 v2.9.3 — 免费 PS 智能 AI 插件

Alpaca是一款免费的PS智能AI插件&#xff0c;包含了6大AI功能&#xff0c;包括提示词生图、图像转绘画风格、生成式填充、文本转图像、计算图像模型、提高图像分辨率。汉化版本安装简单&#xff0c;只需解压到PhotoShop安装目录\Plug-ins文件夹即可。安装启动PhotoShop - 增效工…

基于Springboot和BS架构的宠物健康咨询系统pf

TOC springboot509基于Springboot和BS架构的宠物健康咨询系统pf 第一章 课题背景及研究内容 1.1 课题背景 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#x…

前端本地代理配置方式

Whistle 介绍 Whistle 是一个基于 Node.js 的跨平台 Web 调试工具。允许捕获、查看和修改 HTTP/HTTPS 网络请求。通过使用 Whistle&#xff0c;可以轻松地进行接口代理、抓包、模拟数据、修改请求和响应等操作&#xff0c;以便在前端开发中调试网络请求。 Proxy SwitchyOmega…

记录一个变量溢出的bug

文章目录 如题 如题 count2变量溢出了&#xff08;超过了255&#xff09;&#xff0c;结果导致busOff_16bitRecordHILTime变量莫名其妙被清0

c++题目_背包问题(可任意分割) 贪心算法

题目描述 有一个背包&#xff0c;背包容量是mm。有nn个物品&#xff0c;每个物品都有自己的重量wiw​i​​和价值viv​i​​&#xff0c;物品可以分割成任意大小。 要求尽可能让装入背包中的物品总价值最大&#xff0c;但不能超过总容量。 输入 第一行输入两个正整数 mm 和 n…

【C++】提高 -- 类模板

目录 一、类模板的作用 二、类模板的语法 三、类模板的例子 四、类模板和函数模板的区别 五、类模板中成员函数创建时机 六、类模板对象做函数参数 七、类模板与继承 八、类模板成员函数类外实现 九、类模板分文件编写 十、类模板与友元 十一、类模板案例 一、类模板…

日撸Java三百行(day31:整数矩阵及其运算)

目录 前言 一、基本属性与方法 二、getter与setter方法 三、矩阵相加与矩阵相乘方法 1.矩阵相加 2.矩阵相乘 四、数据测试 五、完整的程序代码 总结 前言 从今天开始&#xff0c;我们就要踏上图论的学习之路了。第一天&#xff0c;我们先简单热个身&#xff0c;构造一…

手持气象站:便携式、高精度设备

在科技日新月异的今天&#xff0c;气象观测技术正以前所未有的速度发展&#xff0c;从传统的地面观测站、高空探测到卫星遥感&#xff0c;每一步都极大地拓宽了我们对天气的认知边界。而在这股科技浪潮中&#xff0c;手持气象站作为一种便携式、高精度的气象监测设备&#xff0…

Ps:首选项 - 文件处理

Ps菜单&#xff1a;编辑/首选项 Edit/Preferences 快捷键&#xff1a;Ctrl K Photoshop 首选项中的“文件处理” File Handling选项卡允许用户精确控制 Photoshop 的文件保存行为和兼容性选项。这些设置非常重要&#xff0c;尤其在处理大文件或与其他软件协作时&#xff0c;可…

用Zipkin在分布式系统追踪收集和查看时间数据

Zipkin是一个开源的分布式追踪系统&#xff0c;它帮助收集、存储和展示实时的数据&#xff0c;以便于定位微服务架构中的延迟问题。以下是Zipkin的核心组件和工作流程的介绍&#xff0c;以及如何在Java中使用Spring Cloud Sleuth与Zipkin集成的案例。 Zipkin的核心组件&#x…

那些久远的开发语言(COBOL、Pascal、Perl等)还有市场吗

旧的开发语言 在旧的开发语言中&#xff0c;除了Combo和BASIC之外&#xff0c;还有一些其他曾经流行或具有重要历史意义的编程语言&#xff0c;例如&#xff1a; FORTRAN&#xff1a;1957年诞生&#xff0c;是第一个编译型语言&#xff0c;主要用于科学和工程计算 。LISP&…

RabbitMQ高级用法

&#x1f4a5; 该系列属于【SpringBoot基础】专栏&#xff0c;如您需查看其他SpringBoot相关文章&#xff0c;请您点击左边的连接 目录 一、发送者的可靠性 1. 生产者重试机制 2. 生产者确认机制【return和confirm机制】 &#xff08;1&#xff09;开启生产者确认 &#x…

ARCGIS XY坐标excel转要素面

1、准备好excel 坐标 excel文件转为csv才能识别&#xff0c;CSV只能保留第一个工作表并且&#xff0c;不会保留格式。 2、在ArcGis中导入XY事件图层 创建XY事件图层 图层要素赋对象ID 将导入的图层导出为先新的图层&#xff0c;这样就给每个要素附加了唯一的值 选择点集转线…

python模块03 --ddt数据驱动

自动化框架设计思想&#xff1a; (1) 数据驱动测试&#xff1a;即英文单词Data-Driven Testing&#xff0c;简称DDT。 (2) 关键字驱动测试&#xff1a;即英文单词Keyword-Driven Testing&#xff0c;简称KDT。 (3) 业务流程测试&#xff1a;即英文单词Business Process Tesi…

AI大模型:开源与闭源的激烈交锋与未来展望

在人工智能的浩瀚星空中&#xff0c;大模型作为技术的璀璨明珠&#xff0c;正引领着行业变革的浪潮。从最初的闭源垄断到如今的开源与闭源并驾齐驱&#xff0c;AI大模型的发布趋势、竞争格局以及技术演进&#xff0c;无不彰显着这一领域的蓬勃生机与无限可能。本文将深入探讨开…