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

news2024/11/20 1:30:13

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

一、效果

 二、写个日期选择器

 :picker-options:日期选项

 value-format:选择后的格式

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

<el-date-picker
          type="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.coloradmin.cn/o/961835.html

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

相关文章

Revit SDK 介绍:AvoidObstruction 避免碰撞

前言 这个例子介绍如何让碰撞在一起的管道避免碰撞&#xff0c;即对管道进行调整。 内容 调整前&#xff1a; 调整后&#xff1a; 从结果来看&#xff0c;所有的碰撞都被调整了。作为一个例子&#xff0c;不会去考虑是否合理&#xff0c;仅仅是展示了一下 Revit API 的能…

51单片机智能电风扇控制系统proteus仿真设计( 仿真+程序+原理图+报告+讲解视频)

51单片机智能电风扇控制系统仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 讲解视频1.主要功能&#xff1a;2.仿真3. 原理图4. 程序代码5.设计报告6. 设计资料内容清单 51单片机智能电风扇控制系统仿真设计( proteus仿真程序原理图报告讲解视频&#xff09; 仿真图…

日志记录一

我们知道&#xff0c;当注释掉配置环境变量 export ……之后&#xff0c;需要source ……之后&#xff0c;修改内容才能生效&#xff1b;例如&#xff1a;将export的Java环境变量注释掉或者删除掉后&#xff0c; vi /etc/profile source /etc/profile 使之生效。 但是&#xf…

专访张少光---国内著名牛散、实战专家

导读&#xff1a;新财富最佳分析师评选作为中国本土第一份市场化的分析师评选&#xff0c;自2003年开启至今已20年&#xff0c;通过公正、公平、公开的评选&#xff0c;与市场各方共同挖掘了大量优秀分析师。值此新财富最佳分析师评选20周年之际&#xff0c;我们期望通过《对话…

CCF-CSP 30次 第二题【矩阵运算】

计算机软件能力认证考试系统 #include<bits/stdc.h> using namespace std; const int N1e410; #define int long long int n,d; int q[N][22],k[22][N],v[N][22],w[N]; int ans1[N][22],ans2[N][22]; signed main() {scanf("%lld %lld",&n,&d);for(in…

nvm安装后,安装并切换版本,node报错

1、下载 下载地址 https://github.com/coreybutler/nvm-windows/releases 这个版本是 v1.1.11&#xff0c;不喜欢的话&#xff0c;自己选版本 下载setup.exe&#xff0c;安装 2、安装 安装时候 安装路径可以自选&#xff0c;但是涉及到指向的路径&#xff0c;最好让它自己选&…

【实操干货】如何开始用Qt Widgets编程?(四)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

Self-supervised 3D Human Pose Estimation from a Single Image

基于单幅图像的自监督三维人体姿态估计 主页&#xff1a; https://josesosajs.github.io/ imagepose/ 源码&#xff1a;未开源 摘要 我们提出了一种新的自我监督的方法预测三维人体姿势从一个单一的图像。预测网络是从描绘处于典型姿势的人的未标记图像的数据集和一组未配对…

论文解读 | 三维点云深度学习的综述

原创 | 文 BFT机器人 KITTI 是作为基准测试是自动驾驶中最具影响力的数据集之一&#xff0c;在学术界和工业界都被广泛使用。现有的三维对象检测器存在着两个限制。第一是现有方法的远程检测能力相对较差。其次&#xff0c;如何充分利用图像中的纹理信息仍然是一个开放性的问题…

Qt应用开发(基础篇)——错误提示框 QErrorMessage

一、前言 QErrorMessage类继承于QDialog&#xff0c;是一个用来显示错误信息的对话框。 提示框QDialog 消息对话框 QMessageBox QErrorMessage错误消息对话框提供了一个主文本窗口、一个复选框、一个图标和按钮。文本框用来显示错误信息&#xff0c;复选框用来让用户选择未来是…

【实训项目】传道学习助手APP设计

1.设计摘要 跨入21世纪以来,伴随着时代的飞速发展&#xff0c;国民对教育的重视度也有了进一步的提升。我们不难发现虽然很多学习内容有学习资料或者答案&#xff0c;但是这些内容并不能达到让所有求学的人对所需知识进行完全地理解与掌握。所以我们需要进行提问与求助。那么一…

深入RocketMQ生产者负载均衡(顺序消息场景):剖析MessageGroupHash模式和SipHash算法

文章首发地址 RocketMQ生产者负载均衡中的MessageGroupHash模式 在RocketMQ顺序消息场景&#xff0c;默认使用MessageGroupHash模式的负载均衡策略。 MessageGroupHash模式下&#xff0c;生产者发送消息时&#xff0c;以消息组为粒度&#xff0c;按照内置的Hash算法&#xf…

实现无公网IP环境下远程访问本地Jupyter Notebook服务的方法及端口映射

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…

电商数据监测的原因是什么

电商数据包含主流电商平台&#xff0c;如淘宝、天猫、京东、拼多多等&#xff0c;也包括抖音、快手等直播平台&#xff0c;另外外卖平台的数据、小时达平台的数据&#xff0c;都可称之为电商数据&#xff0c;电商数据其实也是品牌的线上产品链接&#xff0c;监测产品链接&#…

VBA快速插入签名(位置不固定)

实例需求&#xff1a;Excel中的多页表格如下图所示&#xff0c;其中包含多个“受益人签字”&#xff0c;其位置不固定&#xff0c;现在需要在其后插入签名图片。 签名图片为透明背景的PNG文件&#xff08;左上角方框内的部分&#xff09;&#xff0c;图片文件属性信息如下图所示…

ERROR(IMPSP-365) innovus加endcap失败问题解析

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 ERROR(IMPSP-365)&#xff1a;Design has inst with SITE (xx_site)&#xff0c;but the floorplan has no rows defined for this site.Any location for such instance will …

查询优化器内核剖析之产生候选执行计划执行计划成本估算

本篇的议题如下: 产生候选执行计划执行计划成本估算产生候选执行计划 我们知道&#xff0c;查询优化器的基本的目标就是为我们的查询语句找出一个比较高效的执行计划。 即使是一个非常简单的查询&#xff0c;也会存在很多的不同方式去访问数据&#xff0c;而这些不同的方式都是…

【设备树笔记整理7】实践操作

1 使用设备树给DM9000网卡_触摸屏指定中断 1.1 修改方法 根据设备节点的compatible属性&#xff0c;在驱动程序中构造/注册 platform_driver&#xff0c;在 platform_driver 的 probe 函数中获得中断资源。 1.2 实验方法 以下是修改好的代码&#xff1a;第6课第1节_网卡_触摸…

1.硬件结构

1.CPU如何执行程序&#xff1f; 图灵机的工作方式 纸带&#xff1a;一个一个连续的格子存放数据&#xff1b; 读写头&#xff1a;读取纸带上格子字符&#xff0c;读写头上有一些部件&#xff0c;比如存储单元、控制单元及运算流程 1、存储单元用于存放数据&#xff1b; 2、控…