基于element-ui的年份范围选择器
基于element-ui的年份范围选择器
element-ui官方只有日期范围和月份范围选择器,根据需求场景需要,支持年份选择器,原本使用两个分开的年份选择器实现的,但是往往有些是不能接受的。在网上找了很多都没有合适的,所以打算自己改造一个,仅供码友们参考。

-
下载对应的代码到本地 文件地址,以下是我的目录结构,我将下载的文件放到了src/components下。

-
全局引入或者局部引入使用
全局引入
import DatePicker from '@/components/datePicker/src/date-picker.js'Vue.component(DatePicker.name, DatePicker)局部引入
import DatePicker from '@/components/datePicker' -
调用方法,下面的参数和element-ui原有el-date-picker的api保持不变
<date-pickertype="yearrange"v-model="filter1"value-format="yyyy"format="yyyy年"range-separator="至"start-placeholder="开始年份"end-placeholder="结束年份"></date-picker> -
日期限制处理(禁用),下面我以我这边的需求为例,
- 选择的年份需等于或小于当前年份
- 选择的年份范围必须在三年之内
data () {return {timeRange: '',pickerOptions: {onPick: ({ maxDate, minDate }) => {this.timeRange = minDateif (maxDate) this.timeRange = ''},disabledDate: time => {if (this.timeRange) {const minTime = this.timeRange - 3const maxTime = this.timeRange + 3return (dayjs(time).format('YYYY') < minTime ||dayjs(time).format('YYYY') > maxTime ||time.getTime() + 1 * 24 * 3600 * 1000 > Date.now())} else {return (time.getTime() + 1 * 24 * 3600 * 1000 > Date.now())}}}}}
最终效果
iShot_2023-09-07_14.44.04
相关文章:
基于element-ui的年份范围选择器
基于element-ui的年份范围选择器 element-ui官方只有日期范围和月份范围选择器,根据需求场景需要,支持年份选择器,原本使用两个分开的年份选择器实现的,但是往往有些是不能接受的。在网上找了很多都没有合适的,所以打…...
【已解决】您所使用的密钥ak有问题,不支持jsapi服务,可以访问该网址了解如何获取有效密钥。
您所使用的密钥ak有问题,不支持jsapi服务,可以访问该网址了解如何获取有效密钥。详情查看:http://lbsyun.baidu.com/apiconsole/key#。 问题 百度密钥过期 思路 注册成为开发者 如果还没注册百度地图api账号的,点击以后就进入…...
JS操作数组方法学习系列(1)
目录 数组添加元素 (push)数组移除末尾元素 (pop)数组添加元素到开头 (unshift)数组移除开头元素 (shift)数组查找元素索引 (indexOf)数组反向查找元素索引 (lastIndexOf)数组切割 (slice)数组连接 (concat)数组元素查找 (find 和 findIndex)数组元素过滤 (filter)数组元素映射…...
翻牌闯关游戏
翻牌闯关游戏 3关:关卡由少至多12格、20格、30格图案:12个玩法:点击两张卡牌,图案一到即可消除掉 记忆时长(毫秒):memoryDurationTime:5000 可配置:默认5000 提示游戏玩法:showTipsFlag:1 可…...
CilckHouse创建表
一、引擎 一开始没注意有引擎选择,要用什么引擎去官方文档看看自己建的表适合什么引擎,大部分用MergeTree 二、用sql语句生成表 1、MergeTree引擎 原文地址:https://blog.csdn.net/qq_21383435/article/details/122812921?ops_request_misc%…...
高级运维学习(八)Ceph 概述与部署
ceph概述 ceph可以实现的存储方式: 块存储:提供像普通硬盘一样的存储,为使用者提供“硬盘”文件系统存储:类似于NFS的共享方式,为使用者提供共享文件夹对象存储:像百度云盘一样,需要使用单独的客…...
【图像处理】VS编译opencv源码,并调用编译生成的库
背景 有些时候我们需要修改opencv相关源码, 这里介绍怎么编译修改并调用修改后的库文件。 步骤 1、下载相关源码工具: 下载opencv4.8源码并解压 https://down.chinaz.com/soft/40730.htm 下载VS2019,社区版免费 https://visualstudio.micro…...
STM32 EtherCAT 总线型(1 拖 4)步进电机解决方案
第 1 章 概述 技术特点 支持标准 100M/s 带宽全双工 EtherCAT 总线网络接口及 CoE 通信协议一 进一出(RJ45 接口),支持多组动态 PDO 分组和对象字典的自动映射,支持站 号 ID 的自动设置与保存,支持 SDO 的…...
Postman应用——测试脚本Test Script
文章目录 Test Script脚本CollectionFolderRequest 解析响应体断言测试 测试脚本可以在Collection、Folder和Request的Pre-request script 和 Test script中编写,测试脚本可以检测请求响应的各个方面,包括正文、状态代码、头、cookie、响应时间等&#x…...
JS的网络状态以及强网弱网详解
文章目录 1. online 和 offline 事件2. navigator.onLine2.1 什么是 navigator.connection?2.2 如何使用 navigator.connection?2.3 总结 1. online 和 offline 事件 online 和 offline 事件是浏览器自带的两个事件,可以通过添加事件监听器来…...
大数据-kafka学习笔记
Kafka Kafka 是一个分布式的基于发布/订阅模式的消息队列(Message Queue),主要应用于大数据实时处理领域。 Kafka可以用作Flink应用程序的数据源。Flink可以轻松地从一个或多个Kafka主题中消费数据流。这意味着您可以使用Kafka来捕获和传输…...
详述RPA项目管理流程,RPA项目管理流程是什么?
RPA(Robotic Process Automation,机器人流程自动化)是一种通过软件机器人模拟人类在计算机上执行重复性任务的技术。RPA可以帮助企业提高工作效率、降低成本、减少错误并提高客户满意度。然而,为了确保RPA项目的成功实施ÿ…...
爬虫 — Js 逆向
目录 一、概念1、爬虫2、反爬虫3、加密解密4、加密5、步骤 二、常用加密方式1、加密方式2、常见加密算法3、JS 中常见的算法4、MD5 算法4.1、MD5 加密网站4.2、特点 5、DES/AES 算法6、RSA 算法7、base64 算法 三、环境配置1、node.js 环境配置2、PyCharm 环境配置 一、概念 1…...
Python 网络爬取的时候使用那种框架
尽管现代的网站多采取前后端分离的方式进行开发了,但是对直接 API 的调用我们通常会有 token 的限制和可以调用频率的限制。 因此,在一些特定的网站上,我们可能还是需要使用网络爬虫的方式获得已经返回的 JSON 数据结构,甚至是处理…...
CentOS7安装源设置
此处的安装源地址需要填写:(适用于centos7) http://mirrors.aliyun.com/centos/7/os/x86_64/...
pool = multiprocessing.Pool()报错:module object has no attribute Pool
pool multiprocessing.Pool()报错:module object has no attribute Pool,为什么? 我很抱歉,前面提供的回答是错误的。在Python的multiprocessing模块中,确实有一个名为Pool的类。如果你在使用multiprocessing.Pool()…...
Linux Shell 实现一键部署podman
podman 介绍 使用 Podman 管理容器、Pod 和映像。从本地环境中无缝使用容器和 Kubernetes,Podman 提供与 Docker 非常相似的功能,它不需要在你的系统上运行任何守护进程,并且它也可以在没有 root 权限的情况下运行。 Podman 可以管理和运行…...
Biome-BGC生态系统模型与Python融合技术
Biome-BGC是利用站点描述数据、气象数据和植被生理生态参数,模拟日尺度碳、水和氮通量的有效模型,其研究的空间尺度可以从点尺度扩展到陆地生态系统。 在Biome-BGC模型中,对于碳的生物量积累,采用光合酶促反应机理模型计算出每天…...
Matlab图像处理-区域描述
一旦一幅图像的目标区域被确定,我们往往用一套描述子来表示其特性。选择区域描述子的动机不单纯为了减少在区域中原始数据的数量,而且也应有利于区别带有不同特性的区域。因此,当目标区域有大小、旋转、平移等方面的变化时,针对这…...
openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据
文章目录 openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据 openGauss学习笔记-69 openGauss 数据库管理-创建和管理普通表-更新表中数据 修改已经存储在数据库中数据的行为叫做更新。用户可以更新单独一行、所有行或者指定的部分行。还可以独立更新…...
基于 Kinova Gen3 机械臂的家庭人机交互安全算法研究
随着服务机器人逐步进入家庭场景,人机交互(HRI)的安全性成为影响机器人普及的关键因素。相较于工业环境,家庭空间布局多变、人员活动随机,对机械臂的感知、规划与控制提出了更高要求。本文以7自由度Kinova Gen3机械臂为…...
快速上手Qwen3-TTS:无需代码,Web界面直接合成10种语言语音
快速上手Qwen3-TTS:无需代码,Web界面直接合成10种语言语音 1. 为什么选择Qwen3-TTS语音合成 语音合成技术正在改变我们与数字世界的交互方式。想象一下,你正在制作一个多语言教学视频,或者开发一个国际化的智能客服系统…...
24/7运行指南:OpenClaw+GLM-4-7-Flash树莓派部署与看门狗配置
24/7运行指南:OpenClawGLM-4-7-Flash树莓派部署与看门狗配置 1. 为什么选择树莓派作为OpenClaw的宿主设备? 去年冬天,当我第一次尝试让OpenClaw在我的主力开发机上24小时运行时,遭遇了严重的资源冲突问题。半夜运行的自动化任务…...
Xcode打包上传App Store Connect失败?可能是这些配置没做好(含解决方案)
Xcode打包上传App Store Connect失败排查指南:从配置到解决方案 每次提交应用上架都是iOS开发者必经的考验,而Xcode打包上传过程中遇到的"无效二进制文件"错误堪称拦路虎。这种错误往往不会给出明确提示,而是通过邮件通知或在App S…...
终极指南:使用OpenCore Legacy Patcher为老旧Mac安装最新macOS系统
终极指南:使用OpenCore Legacy Patcher为老旧Mac安装最新macOS系统 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 还在为老旧Mac无法升级最新系统而烦恼吗&am…...
s2-pro效果展示:多说话人语音合成(同一模型切换不同音色)
s2-pro效果展示:多说话人语音合成(同一模型切换不同音色) 1. 专业级语音合成效果展示 s2-pro作为Fish Audio开源的专业级语音合成模型,其最惊艳的能力在于同一模型支持多种音色切换。通过上传不同的参考音频,模型可以…...
FastAPI流式响应性能断崖式下跌?3个隐藏内存泄漏点,资深工程师连夜修复的5行关键代码
第一章:FastAPI 2.0 异步 AI 流式响应 面试题汇总FastAPI 2.0 原生强化了对异步流式响应(StreamingResponse)的支持,尤其在大语言模型(LLM)推理、实时 token 生成、语音转文字等 AI 场景中成为高频考点。面…...
24小时运行验证:OpenClaw+ollama-QwQ-32B自动化监控脚本稳定性测试
24小时运行验证:OpenClawollama-QwQ-32B自动化监控脚本稳定性测试 1. 项目背景与目标设定 去年冬天的一个深夜,我被手机警报惊醒——某个关键商品的价格突然跌破了我的心理预期。手忙脚乱登录电商平台时,优惠早已结束。这次经历让我意识到&…...
Rufus安装ubantu系统全过程
清水补充:这次安装的是ubantu22.04版本,准备来给两个电脑装,内存分配是分别是,微星老电脑是一个盘200G,/boot 使用1G,/swap 17G , 、/ 根目录90G,/home 文件目录96G ,实验…...
基于光伏出力不确定性的梯级水光互补系统短期优化调度模型及Matlab代码复现研究报告
1023-(文章复现)梯级水光互补系统最大化可消纳电量期望短期优化调度模型matlab代码 参考资料《梯级水光互补系统最大化可消纳电量期望短期优化调度模型》 文中考虑光伏出力不确定性,以整体可消纳电量期望最大为目标,提出了梯级水光互补系统的短期优化调度…...
