element-ui的年份范围选择器,选择的年份需等于或小于当前年份,选择的年份范围必须在三年之内

写在前面

日期限制处理(禁用),下面我以我这边的需求为例,

选择的年份需等于或小于当前年份
选择的年份范围必须在三年之内

1.限制起始日期小于截止日期
1)根据用户选中的开始日期,置灰不可选的日期范围;

2)如果用户先选择截止日期,再选择的开始日期,且开始日期大于截止日期,清空截止日期;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  <div class="min-wid data-flex-start" ><span class="with-hide"></span><span class="with-d with-s"></span><div class="year-range-picker"><el-date-pickerv-model="dateList[0]":picker-options="startDatePicker"type="year"placeholder="选择开始年"size="mini"class="year-picker"format="yyyy"value-format="yyyy"@change="handleDateChange"/><span class="range-word"></span><el-date-picker:key="randomKey "v-model="dateList[1]":picker-options="endDatePicker":default-value="dateDefaultShow"type="year"placeholder="选择结束年"size="mini"class="year-picker"value-format="yyyy"/></div></div>
 data() {return {randomKey: 0,startDatePicker: this.beginDate(),endDatePicker: this.processDate(),dateDefaultShow: '', // 日期选择器的日期默到选择的年份datatimeStr: {dateBegin: '',endDataDate: ''},minNowDate: '',maxNowDate: '',dateList: ['', '']}}
 methods: {// 获取日期 disabledDate 函数用于定义哪些日期应该被禁用。禁止选择大于特定日期的日期。// 选择年份范围选择时开始时间不能大于结束时间,结束时间不能小于开始时间// 提出开始时间必须小于提出结束时间beginDate() {const self = thisreturn {disabledDate(time) {if (self.dateList[1] !== '') {const fixedTime = new Date(time)return fixedTime.getFullYear() > self.dateList[1]}}}},// 提出结束时间必须大于提出开始时间processDate() {const self = thisreturn {disabledDate(time) {if (self.dateList[0] !== '') {const fixedTime = new Date(time)if ((Number(self.maxNowDate) - Number(self.dateList[0])) <= 2) {return fixedTime.getFullYear() > self.maxNowDate || fixedTime.getFullYear() < self.dateList[0]} else {return fixedTime.getFullYear() > (self.maxNowDate - (Number(self.maxNowDate) - Number(self.dateList[0])) + 2) || fixedTime.getFullYear() < self.dateList[0]}}}}},// 获取最大日期getMaxDate() {getDataDate().then(res => {// 默认结束年为有数据的最近年,默认开始年为默认结束年-2,即默认时间范围为3年this.maxNowDate = res.slice(0, 4)this.minNowDate = this.maxNowDate - 2this.dateList[0] = this.minNowDate.toString()this.dateList[1] = this.maxNowDate// 强制刷新this.$forceUpdate()}).catch(err => {console.log(err)})},// 当开始日期改变时的处理函数// 如果截止日期早于开始日期3年以上,将截止日期清空handleDateChange() {// 当选择的开始日期比结束日期早三年以上时,清空结束日期if (this.dateList[1] - 2 > this.dateList[0]) {this.dateList[1] = ''// 改变数组内的值,强制刷新,清空结束日期的显示this.randomKey = Math.random()}// 日期选择器定位到选择的开始年份this.dateDefaultShow = this.dateList[0]}}
<style scoped>/* 顶部样式 */.card-head{padding:12px 16px;background-color: #fff;position:relative;}/* 数据日期字体样式 */.date-font{color: var(---Gray-6, #78808F);font-family: "PingFang SC";font-size: 12px;font-style: normal;font-weight: 400;line-height: 20px; /* 166.667% */}/*弹性布局:两端对齐 */.data-flex-sabw{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}/* 弹性布局:左对齐*/.data-flex-start {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}/* 弹性布局:右对齐*/.data-flex-end {display: flex;flex-direction: row;justify-content: flex-end;align-items: center;}.tp-con{width: 100%;height: 56px;box-sizing: border-box;display: flex;padding: 12px 0px;align-items: flex-start;gap: 20px;}/*隐藏显示,占位*/.with-hide {opacity: 0;color: var(---Neutral-8, #292929);font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.with-d {width: 24px;}.with-t {width: 80px;}.with-l {width: 38px;}.with-s {box-sizing: border-box;padding-right: 8px;color: var(---Neutral-8, #292929);text-align: right;font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.st_line {box-sizing: border-box;margin: 0 2px;width: 9px;height: 22px;color: var(---Gray-6, #78808F);text-align: center;font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.min-wid{min-width:160px;}.query-bt {background-color: #00B0B0;color: #FFF;outline: none;}.center-deep{hight: 100%;width: 100%;background-color: #fff;margin-top: 16px;}/deep/ .treeselect-main {width: 204px;line-height: 28px;}/deep/ .vue-treeselect__placeholder {line-height: 28px;}/deep/ .vue-treeselect__control {height: 32px !important;line-height: 32px;border-radius: 4px;}/deep/.vue-treeselect__single-value {font-size: 14px;top: 0%;color: #606266;font-weight: 400;}/deep/.vue-treeselect__input {height: 32px;line-height: 32px;}/*顶部筛选器输入框宽度*//deep/.el-select el-select--small,el-input el-input--small el-input--suffix{width: 100% !important;flex: 1;}/*年范围选择器*/.year-range-picker {color: black;text-align: center;border: 1px solid #dcdfe6;border-radius:4px;line-height: 32px;overflow: hidden;display: flex;margin: 4px 0;}/deep/.el-input--mini .el-input__inner {height: 32px;line-height: 32px;border: none}.range-word {box-sizing: border-box;padding-top: 6px;color: var(---Neutral-8, #292929);text-align: right;font-family: "PingFang SC";font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px;}.year-range-picker .year-picker {max-width: 150px;margin:0;}
</style>

参考文章:ElementUI 年份范围选择器 el-year-picker
点开是关联的组件-基于element-ui的年份范围选择器
vue中element-ui日期选择组件el-date-picker 清空所选时间,会将model绑定的值设置为null 问题 及 限制起止日期范围
vue elementui时间控件,(单框同时选)范围选择周,季,年。
element ui datepicker时间控件实现范围选择周,季,年。
ElementUI年份范围选择器功能实现
element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间
vue2、vue3中使用$forceUpdate()

🚀写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~

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

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

相关文章

【腾讯云 TDSQL-C Serverless 产品体验】饮水机式使用云数据库

云计算的发展从IaaS&#xff0c;PaaS&#xff0c;SaaS&#xff0c;到最新的BaaS&#xff0c;FasS&#xff0c;在这个趋势中serverless(去服务器化&#xff09; 计算资源发展Physical -> Virtualisation -> Cloud Compute -> Container -> Serverless。 一、背景介绍…

什么是电子邮件组,为什么要使用它们?

在当今时代&#xff0c;电子邮件无处不在&#xff0c;尤其是对于商业活动而言。电子邮件的重要性不容忽视&#xff0c;因为它在沟通中极为高效。然而&#xff0c;电子邮件也存在降低工作效率和阻碍流程的风险。在这种情况下&#xff0c;电子邮件群组就是最佳的解决方案。什么是…

代码随想录算法训练营第二十九天|491.递增子序列,46.全排列,47.全排列 II

题目&#xff1a;491.递增子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中至少有两个元素。你可以按任意顺序返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一…

【学习 在服务器上使用bypy直接下载百度云盘的资源。

参考&#xff1a;bypy 具体步骤 step1&#xff1a; pip install bypystep2&#xff1a; bypy info第一次输入该命令&#xff0c; 点击进入网址&#xff0c;点击登陆后&#xff0c;获取token&#xff08;10分钟内有效&#xff09;&#xff0c;然后输入到命令行&#xff1a;…

【linux深入剖析】深入理解基础外设--磁盘

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.磁盘物理结构2.磁盘…

Go 实战|使用 Wails 构建轻量级的桌面应用:仿微信登录界面 Demo

概述 本文探讨 Wails 框架的使用&#xff0c;从搭建环境到开发&#xff0c;再到最终的构建打包&#xff0c;本项目源码 GitHub 地址&#xff1a;https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架&#xff0c;他允许开发者利用 Go …

联想电脑VMware虚拟机VT开启虚拟化

以联想电脑为例。 关机重启&#xff0c; 有的电脑是按F2&#xff0c; 有的是按fnF2 进入BIOS&#xff0c;左右键&#xff0c;选择Configuration&#xff0c; 再上下键选择 Intel Virtual Technology 按回车键&#xff0c;再按上下键选择 Enable &#xff0c;回车确认。 按fn…

Xlinx相关原语讲解导航页面

原语就是对FPGA底层器件的直接调用&#xff0c;与IP功能是类似的&#xff0c;将原语的参数变成IP配置时的GUI界面参数&#xff0c;可能会更加直观。IP的缺陷在于繁杂&#xff0c;比如SelectIO IP内部包含IDDR、ODDR等等IO转换的功能&#xff0c;如果只想使用单沿转双沿一个功能…

ChatGPT全方位解析:如何培养 AI 智能对话技能?

简介 ChatGPT 的主要优点之一是它能够理解和响应自然语言输入。在日常生活中&#xff0c;沟通本来就是很重要的一门课程&#xff0c;沟通的过程中表达的越清晰&#xff0c;给到的信息越多&#xff0c;那么沟通就越顺畅。 和 ChatGPT 沟通也是同样的道理&#xff0c;如果想要C…

[软件使用-Vcftools / Plink ] VCF文件中剔除/提取一个或多个样本,两组方法实现及运算时间比较

官网&#xff1a;VCFtools 参数查看&#xff1a; 提取样本 --keep 剔除样本 --remove # 提取某几个样本 system("vcftools --vcf eg.vcf --keep keep.list --recode --out keep") # keep.list 是由每一行为一个样本ID组成的文件 tips: 运行比较耗时 官网&#xff…

【算法】二分算法题

个人主页 &#xff1a; zxctscl 如有转载请先通知 题目 1. 704. 二分查找1.1 分析1.2 代码 2. 34. 在排序数组中查找元素的第一个和最后一个位置2.1 分析2.2 代码 3. 35. 搜索插入位置3.1 分析3.2 代码 4. 852. 山脉数组的峰顶索引4.1 分析4.2 代码 5. 153. 寻找旋转排序数组中…

蓝桥杯简单STL

目录 vector vector定义 vector访问 常用函数 size() ​编辑 push_back(num) pop_back() clear 迭代器&#xff08;iterator) 迭代器定义 遍历数组示例 insert(it, element) erase(it) 标准模板库--STL&#xff0c;它包含了多种预定义的容器、算法和迭代器&…

联想电脑开启虚拟化失败,开启虚拟化却提示还没有开启虚拟化

安装虚拟机的时候&#xff0c; 电脑要开启虚拟化&#xff0c; Intel VT&#xff0c; 去BIOS开启了&#xff0c; 但是依然报错&#xff0c;说虚拟化处于禁用状态。 解决方案&#xff1a; 去联想官方&#xff0c;下载BIOS更新包&#xff0c;更新BIOS。 更新文档&#xff1a; 联…

Harmony鸿蒙南向驱动开发-DAC

DAC&#xff08;Digital to Analog Converter&#xff09;是一种通过电流、电压或电荷的形式将数字信号转换为模拟信号的设备。 DAC模块支持数模转换的开发。它主要用于&#xff1a; 作为过程控制计算机系统的输出通道&#xff0c;与执行器相连&#xff0c;实现对生产过程的自…

MySQL数据库 数据库基本操作(四):表的增删查改(下)

1. 联合查询 注:联合查询是面试中的重点,只要考到sql,大多数情况下都考的是联合查询,而且联合查询也是我们学习中的难点. 1.1 笛卡尔积 在实际开发中,数据往往来自不同的表,所以要多表联合查询.多表查询是对多张表的数据笛卡尔积. 它们是两张表的各行数据通过全排列得到的. …

基于SSM+Jsp+Mysql的高校毕业设计管理系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

秋招复习笔记——八股文部分:操作系统

笔试得刷算法题&#xff0c;那面试就离不开八股文&#xff0c;所以特地对着小林coding的图解八股文系列记一下笔记。 这一篇笔记是图解系统的内容。 硬件结构 CPU执行程序 计算机基本结构为 5 个部分&#xff0c;分别是运算器、控制器、存储器、输入设备、输出设备&#xf…

轻量的 WebHook 工具:歪脖虎克

本篇文章聊聊轻量的网络钩子&#xff08;WebHook&#xff09;工具&#xff1a;歪脖虎克。 写在前面 这是一篇迟到很久的文章&#xff0c;在 21 年和 22 年的时候&#xff0c;我分享过两篇关于轻量的计划任务工具 Cronicle 的文章&#xff1a;《轻量的定时任务工具 Cronicle&a…

运筹学基础(六)列生成算法(Column generation)

文章目录 前言从Cutting stock problem说起常规建模Column generation reformulation 列生成法核心思想相关概念Master Problem (MP)Linear Master Problem (LMP)Restricted Linear Master Problem (RLMP)subproblem&#xff08;核能预警&#xff0c;非常重要&#xff09; 算法…

kvm基础命令

前言 一、基础命令 1.虚拟机查看 2.虚拟机开启与关闭 3.虚拟机删除 4.查看虚拟机的配置 5.配置文件重定向 6.命令行登录虚拟机 二、调整虚拟机磁盘大小 三、虚拟机创建快照 四、virsh console报错 总结 前言 今天我们分享一下如何使用kvm基础命令。 一、基础命令 1.虚拟机查看…