element ui 的 el-date-picker 日期选择组件设置可选日期范围

有时候,在使用日历控件的时候,我们需要进行定制,控制用户只能在指定日期范围内进行日期选择,在这里,我使用了 element ui 的 el-date-picker 日期选择控件,控制只能选择当前月及往前的2个月,效果如图:

HTML代码: 

<template><el-date-picker :picker-options="pickerOptions" type="month" placeholder="选择月" v-model="monthsVal"></el-date-picker>
</template>

JS代码: 

<script>
export default {data() {return {monthsVal:'',pickerOptions: {disabledDate(time) {const currentMonth = new Date().getMonth();const allowedMonths = [currentMonth, currentMonth - 1, currentMonth - 2];return !allowedMonths.includes(time.getMonth());},},}},
}
</script>

CSS代码: 

<style>
.el-month-table td .cell{background-color:unset !important;
}
</style>

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

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

相关文章

java 笔记 第十二章 集合(部分整理细化)

集合概述 &#xff08;1&#xff09;集合是存储其他对象的特殊对象。可以将集合当做一个容器。 &#xff08;2&#xff09;集合的相关接口和类位于java.util包中 &#xff08;3&#xff09;集合中的接口和类是一个整体、一个体系。 集合接口 接口定义了一组抽象方法&#x…

98%企业竟存N日漏洞超5年,新漏洞利用攻击时长极速缩短!

专注推动网络与安全融合的全球网络安全领导者 Fortinet&#xff08;NASDAQ&#xff1a;FTNT&#xff09;&#xff0c;近日发布 FortiGuard Labs&#xff08;Fortinet全球威胁情报响应与研究团队&#xff09;《2023 下半年全球威胁态势研究报告》。本次新发布的半年度研究报告&a…

使用Python进行Socket接口测试

大家好&#xff0c;在现代软件开发中&#xff0c;网络通信是不可或缺的一部分。无论是传输数据、获取信息还是实现实时通讯&#xff0c;都离不开可靠的网络连接和有效的数据交换机制。而在网络编程的基础中&#xff0c;Socket&#xff08;套接字&#xff09;技术扮演了重要角色…

python练习题2

python期考复习题 目录 1. 判断n**2的值每一位互不相同​编辑 2. 密码 3. 图书版号 4. 情感分类矩阵 5. 计算数对个数 1. 判断n**2的值每一位互不相同 def isdiff(n):sstr(n)for i in range(len(s)):for j in range(len(s)):if i!j:if s[i]s[j]:return Falsereturn Truel…

Python输入与输出基础

Python输入与输出基础 引言 Python是一种非常直观且功能强大的编程语言&#xff0c;它允许用户轻松地处理输入和输出操作。无论是从用户那里获取数据&#xff0c;还是将结果展示给用户&#xff0c;Python都提供了简单易用的函数和方法。 一、输入数据 在Python中&#xff0c…

LSTM理解

目录 一、LSTM的本质 二、LSTM的原理 三、LSTM的应用 本文将从LSTM的本质、LSTM的原理、LSTM的应用三个方面&#xff0c;带您一文搞懂长短期记忆网络Long Short Term Memory | LSTM。 一、LSTM的本质 RNN 面临问题&#xff1a;RNN&#xff08;递归神经网络&#xff09;在处理…

数字时代的软件架构:持续架构的兴起与架构师角色的转变

在数字化浪潮的推动下&#xff0c;软件架构领域正经历着前所未有的变革。Eoin Woods在《数字时代的软件架构》演讲中&#xff0c;深入探讨了这一变革&#xff0c;并提出了“持续架构”这一概念。本文将基于Eoin的观点&#xff0c;结合个人理解&#xff0c;探讨持续架构的重要性…

Kali系统的中英文切换

执行命令&#xff1a;sudo dpkg-reconfigure locales 命令作用&#xff1a;重新生成locales配置文件并允许你重新选择所需的语言环境。 中文&#xff1a;zh_CN.UTF-8 UTF-8 英文&#xff1a;en_US.UTF-8 UTF-8 用空格键选中和取消选项。 要设置成中文&#xff1a;取消选择en…

【Git】远程仓库

一、常用的托管服务[远程仓库] 二、注册码云 三、创建远程仓库 四、配置SSH公钥 五、操作远程仓库 5.1、添加远程仓库 5.2、查看远程仓库 5.3、推送到远程仓库 5.4、 本地分支与远程分支的关联关系 5.5、从远程仓库克隆 5.6、从远程仓库中抓取和拉取 5.7、解决合并冲突 一、常…

Labview_Occurrencel(事件发生)

PS&#xff1a;这里遇到 一个很Low的事情&#xff1a; 在停止第二个while循环的时候出现了停止不了的情况。因为等待事件发生设置的超时时间为:-1。所以等事件发生后出现了条件接线端已经执行的情况&#xff0c;所以当下次事件发生时未能及时停止。初版的停止设置如下图&#x…

MMM部署

一.MySQL&#xff0c;MySQL主主复制管理器&#xff09; 是一套支持双主故障切换和双主日常管理的脚本程序。MMM 使用 Perl 语言开发&#xff0c;主要用来监控和管理 MySQL Master-Master &#xff08;双主&#xff09;复制&#xff0c;虽然叫做双主复制&#xff0c;但是业务上同…

六西格玛项目实战:数据驱动,手机PCM率直线下降

在当前智能手机市场日益竞争激烈的背景下&#xff0c;消费者对手机质量的要求达到了前所未有的高度。PCM&#xff08;可能指生产过程中的某种不良率或缺陷率&#xff09;作为影响手机质量的关键因素&#xff0c;直接关联到消费者满意度和品牌形象。为了应对这一挑战&#xff0c…

XGboost详解

文章最前&#xff1a; 我是Octopus&#xff0c;这个名字来源于我的中文名–章鱼&#xff1b;我热爱编程、热爱算法、热爱开源。所有源码在我的个人github &#xff1b;这博客是记录我学习的点点滴滴&#xff0c;如果您对 Python、Java、AI、算法有兴趣&#xff0c;可以关注我的…

设计模式原则——接口隔离原则

设计模式原则 设计模式示例代码库地址&#xff1a; https://gitee.com/Jasonpupil/designPatterns 接口隔离原则 要求程序员尽量将臃肿庞大的接口拆分为更小的和更具体的接口&#xff0c;让接口中只包含客户感兴趣的方法接口隔离原则的目标是降低类或模块之间的耦合度&…

智慧校园-缴费管理系统总体概述

在构建现代化教育环境的过程中&#xff0c;智慧校园缴费管理系统脱颖而出&#xff0c;成为提升校园财务管理效率与服务质量的关键一环。缴费管理系统需要精心设计&#xff0c;通过科技力量&#xff0c;让原本繁琐的缴费流程变得简单快捷&#xff0c;同时增强家校之间的互动与信…

光学相机市场格局:中国光学相机市场评估及未来发展趋势研究报告

欢迎关注GZH《光场视觉》 光学相机行业定义 光学相机是一种利用光学镜头和感光材料&#xff08;如胶片&#xff09;或数字传感器来捕捉图像的装置。光学相机&#xff0c;也常被称作传统相机或胶片相机&#xff0c;其工作原理基于光的折射和聚焦。当光线通过相机的镜头进入时&…

分享暄桐林曦老师的精进心法

暄桐是一间传统美学教育教室&#xff0c;创办于2011年&#xff0c;林曦是创办人和授课老师&#xff0c;教授以书法为主的传统文化和技艺&#xff0c;皆在以书法为起点&#xff0c;亲近中国传统之美&#xff0c;以实践和所得&#xff0c;滋养当下生活。      清风雅致林曦老…

Arduino - OLED

Arduino - OLED Arduino - OLED Arduino通过u8g2库驱动OLEDU8g2 驱动oled自定义中文字库 The OLED (Organic Light-Emitting Diode) display is an alternative for LCD display. The OLED is super-light, almost paper-thin, flexible, and produce a brighter and crisper…

PIP一些问题解决办法

研究生期间遇到关于PIP一些问题报错以及解决办法的汇总 pip安装报错&#xff1a;is not a supported wheel on this platform 本节转自 https://blog.csdn.net/happywlg123/article/details/107281936 ​ 出现这个问题&#xff0c;是由于这个whl和系统python版本不匹配导致的。…

NewspaceGPT带你玩系列之美人鱼图表(类图)

目录 注册一个账号&#xff0c;用qq邮箱&#xff0c;然后登录选一个可用的Plus&#xff0c;不要选3.5探索GPT今天的主角是开始寻梦美人鱼图表我选第二个试一下问答Summary 自定义类图玩一下问答 关于类图的补救方案结论关注我&#xff0c;不迷路&#xff0c;共学习&#xff0c;…