el-date-picker自定义只能选中当前月份和半年内月份等

需求:el-date-picker只能选中当前月期和当前月期往前半年,其他时间就禁用了不让选择了,因为没数据哈哈。当然也可以选择往前一年等。

一、效果

 二、写个日期选择器

 :picker-options:日期选项

 value-format:选择后的格式

 @change:事件改变后触发的函数

<el-date-pickertype="months"v-model="monthTimeData"placeholder="选择一个或多个日期":picker-options="pickerOptions"value-format="yyyyMM"@change="monthTime"></el-date-picker>

三、data的值

      monthTimeData: [], // 绑定的日期值currentDate: new Date(), // 当前时间

四、computed

      this.currentDate.getMonth() - 4:注意!!!这个-4,就是当前月往前可选的几个月,

        -6就是不算上当前月往前可以选6个月,实在不懂可以自己测一下很简单的~

@change时间就是个函数,值就是选择后的值,这边我就不写了

  computed: {pickerOptions() {const startMonth = new Date(this.currentDate.getFullYear(),this.currentDate.getMonth() - 4);const endMonth = this.currentDate;return {disabledDate(time) {return time < startMonth || time > endMonth;},};},},

文章到此结束,希望对你有所帮助~

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

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

相关文章

Python数据分析案例30——中国高票房电影分析(爬虫获取数据及分析可视化全流程)

案例背景 最近总看到《消失的她》票房多少多少&#xff0c;《孤注一掷》票房又破了多少多少..... 于是我就想自己爬虫一下获取中国高票房的电影数据&#xff0c;然后分析一下。 数据来源于淘票票&#xff1a;影片总票房排行榜 (maoyan.com) 爬它就行。 代码实现 首先爬虫获…

【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

一、CSS 优先级 1、优先级引入 定义 CSS 样式时 , 可能出现 多个 类型相同的 规则 定义在 同一个元素上 , 如果 CSS 选择器 相同 , 执行 CSS 层叠性 , 根据 就近原则 选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; <style>div {color: re…

react17:生命周期函数

挂载时更新时 setState触发更新、父组件重新渲染时触发更新forceUpdate触发更新卸载时 react&#xff08;v17.0.2&#xff09;的生命周期图谱如下。 相较于16版本&#xff0c;17版本生命周期函数有如下变化&#xff1a; componentWillMount() componentWillUpdate() compone…

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Mybatis学习|基本的crud、数据库字段与对照类字段不一致问题

1.查询&#xff1a;根据id去查用户 在Dao层的UserMapper接口中增加根据id查用户的方法&#xff0c;定义方法名、传的参数以及返回值 在与UserMapper接口绑定的UserMapper.xml中配置该方法对应的sql语句 编写测试用例 2.增加&#xff1a;插入一个新用户 在Dao层的UserMapper接…

统一使用某一个包管理工具,比如yarn pnpm

原因&#xff1a;前端每个人的习性不一样&#xff0c;有人用npm 有人用yarn等包管理工具&#xff0c;混合下载插件容易出bug&#xff0c;就用个小工具锁住就行了&#xff0c;只能使用yarn或者pnpm反向下载依赖和下载插件。不然就报错 1.在项目主目录下创建preinstall.js // 如…

关于两个不同数据库的两张表建立数据库链接,关联查询数据

一、数据库链接 数据库链接&#xff08;database link&#xff09;是用于跨不同数据库之间进行连接和数据传输的工具或方法。它允许在一个数据库中访问另一个数据库中的对象和数据。 二、具体操作 以Oracle数据库为例 --1.建立链接tjpt CREATE DATABASE LINK tjpt CONNECT…

vscode远程调试PHP代码

目录 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 二、ssh连接和xdebug配置 2.1ssh连接 2.2xdebug配置 三、xdebug调试&#xff0c;访问 一、VScode配置 1.1安装vscode里面的两个扩展 1.2安装对应PHP版本的xdebug 去xdebug官方&#xff0c…

机器学习:无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…

Flutter开发- iOS 问题CocoaPods not installed or not in valid state

解决问题方案&#xff1a; 1、先检查本机CocoaPods是否安装&#xff0c;通过gem list 查看是否安装 打开终端&#xff0c;执行gem list&#xff0c;出现图中的数据即为已安装。未安装看第4 步 2、已经安装了CocoaPods&#xff0c;还出现了图中的提示&#xff0c;你可能已经猜…

Springboot整合logback多节点日志文件加端口号区分

描述&#xff1a;正常情况下&#xff1a;在Springboot 项目的resources目录下创建一个logback-spring.xml的日志配置文件&#xff0c;简单配置如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?><configuration debug"false"&g…

用Rust打印hello world!

步骤1 桌面新建1个名为 rustDemo 的文件夹&#xff08;文件夹名字随便取&#xff09; 步骤2 打开新建的文件夹&#xff0c;在地址输入栏输入 cmd 按回车键进入命令行窗口 步骤3 打开编译器&#xff0c;按 Ctrl S&#xff0c;保存文件到 rustDemo 文件夹中&#xff0c;保存的…