elementui el-date-picker禁止选择今年、今天、之前、时间范围限制18个月

news2024/11/23 23:24:09

1、禁止选择今年之前的所有年份

          <el-date-picker
            v-if="tabsActive === 0"
            :clearable="false"
            v-model="yearValue"
            @change="yearTimeChange"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
            :picker-options="pickerOptions"
            style="width: 90px; border-radius: 8px"
          >
          </el-date-picker>


  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getFullYear() < new Date().getFullYear()
        }
      },
    }
  }

 2、禁止选择今天之前的所有日期

          <el-date-picker
           :clearable="false"
            style="width: 90px; border-radius: 8px"
            v-model="expiration"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            :picker-options="pickerOptions2"
            @change="getReceivableFun">
          </el-date-picker>

  data () {
    return {
        pickerOptions2: {
        disabledDate (time) {
          return time.getTime() < new Date().getTime() - 86400000 //  - 86400000是否包括当天
        }
      },
    }
  }

            

 

 3、选择时间限制  当选择第一个时间后  前后范围限制18个月

          <el-date-picker
              style="width: 230px"
              v-model="countryTime"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
              size="small"
              :clearable="false"
              :picker-options="pickerOptions"
              @change="monthrangeChange($event, 1)"
            >
            </el-date-picker>


  data () {
    return {
      minDate: null,
      maxDate: null,
      pickerOptions: {
        disabledDate: (time) => {
          if (this.minDate !== null && this.maxDate === null) {
            let minMonth = this.minDate.getMonth(),
              lastYear = new Date(this.minDate).setMonth(minMonth - 17),
              nextYear = new Date(this.minDate).setMonth(minMonth + 17)
            // 只能选 minDate 前后18个月的范围
            return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf()
          }
          return false
        },
        onPick: ({ minDate, maxDate }) => {
          this.minDate = minDate
          this.maxDate = maxDate
        }
      },
    }
  }

            

4、禁止选择指定日期之前的所有日期

 
data(){
  return{
    deadlineTime:'2023-11-20'  //  代表指定日期
    pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date(deadlineTime || new Date()).getTime(); 
        },
      },
  }
}

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

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

相关文章

手搓数组栈(C语言)

stack.h #pragma once#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> // 支持动态增长的栈 typedef int STDataType; typedef struct Stack {STDataType* a;int top; // 栈顶int capacity; // 容量 }Stack; //…

光伏储能系统的主要作用都有什么?

光伏储能系统&#xff0c;结合了光伏技术和储能技术&#xff0c;已经成为当今可再生能源领域的重要一环。它不仅在电力供应中扮演着关键角色&#xff0c;还在许多其他领域展现出其广泛的应用价值。本文将详细探讨光伏储能系统的主要作用。 首先&#xff0c;光伏储能系统在家庭住…

Java苍穹外卖03-Redis-营业状态-HttpClient-微信小程序开发-微信登录以及浏览

一、Redis入门 1.Redis简介 是对MySQL数据库的补充 2.下载安装 启动redis&#xff1a; 再开一个cmd&#xff1a;连接本地redis数据库 如果想连接其他地方的redis数据库&#xff1a;h为ip&#xff0c;p为端口 a为密码 3.数据类型 哈希适合存储对象&#xff0c;列表适合存储…

【问题实操】银河麒麟高级服务器操作系统实例,CPU软锁报错触发宕机

1.服务器环境以及配置 处理器&#xff1a; Kunpeng 920 内存&#xff1a; 256G DDR4 整机类型/架构&#xff1a; TaiShan 200 (Model 2280) 内核版本 4.19.90-23.8.v2101.ky10.aarch64 2.问题现象描述 两台搭载麒麟v10 sp1的机器均在系统CPU软锁报错时&#xff0c;触…

基于遗传优化算法的TSP问题求解matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于遗传优化算法的TSP问题求解&#xff0c;分别对四个不同的城市坐标进行路径搜索。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 3.核心程序 ....…

迅睿CMS图集多文件Files调用指南

在构建企业网站、B2B/B2C商城&#xff0c;或任何功能性质以图片展示为主的平台时&#xff0c;使用多图或图集功能变得至关重要。特别是当展示大量产品的详细视图、项目案例图片&#xff0c;或任何需要以图集形式呈现的内容时&#xff0c;多文件Files功能便发挥着无可替代的作用…

Facebook的语言学:社交媒体如何影响我们的沟通方式

1. 引言 社交媒体已经成为人们日常生活中不可或缺的一部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;不仅改变了人们之间的社交方式&#xff0c;也对我们的语言学产生了深远的影响。本文将深入探讨Facebook的语言学特点&#xff0c;以及它如何塑造和改变…

AI大模型探索之路-训练篇4:大语言模型训练数据集概览

系列文章目录&#x1f6a9; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 文章目录 系列文章目录&#x1f6a9;前言一、常用的预训练…

优秀的控制台厂家需要考虑哪些方面

在当今数字化时代&#xff0c;控制台已成为众多行业不可或缺的一部分。面对市场上众多的控制台厂家&#xff0c;如何选择合适的供应商成为了一个重要的问题。本文嘉德立将从需求分析、产品质量、价格、服务、口碑等多个方面&#xff0c;为您详细解析如何选择一家优秀的控制台厂…

珠宝品牌如何借助3D技术,成就营销破局之路?

随着电商的快速发展&#xff0c;一直以实体店销售为主的珠宝行业&#xff0c;也开始向线上销售转型&#xff0c;但珠宝作为客单价较高的商品&#xff0c;在线上销售的过程中&#xff0c;会面临图片展示效果不佳&#xff0c;无法亲身体验佩戴效果等问题。 而3D、VR、AR等技术的出…

数海启航:数学与人工智能的深度交织

在人类文明的长河中&#xff0c;数学始终扮演着探秘未知、构建理论框架的基石角色。随着科技的飞速发展&#xff0c;尤其是人工智能&#xff08;AI&#xff09;的兴起&#xff0c;数学与这一前沿领域的结合愈发紧密&#xff0c;成为推动AI进步的最强引擎。 一、数学&#xff1a…

20232801 2023-2024-2 《网络攻防实践》实践八报告

20232801 2023-2024-2 《网络攻防实践》实践八报告 1.实践内容 1.动手实践任务: 对提供的rada恶意代码样本&#xff0c;进行文件类型识别&#xff0c;脱壳与字符串提取&#xff0c;以获得rada恶意代码的编写作者. 2.动手实践任务二&#xff1a;分析Crackme程序 在WinXP Attac…

自定义一个RedisTemplate

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis&…

动手学深度学习——矩阵

1. 基本概念 1.1 标量 标量由只有一个元素的张量表示。 所以标量计算与程度开发中的普通变量计算没有差异。 import torchx torch.tensor(3.0) y torch.tensor(2.0)x y, x * y, x / y, x**y(tensor(5.), tensor(6.), tensor(1.5000), tensor(9.))1.2 向量 向量泛化自标量…

前端CSS基础11(相对定位,绝对定位,固定定位,粘性定位)

前端CSS基础11&#xff08;相对定位&#xff0c;绝对定位&#xff0c;固定定位&#xff0c;粘性定位&#xff09; CSS相对定位&#xff08;position: relative;&#xff09;相对定位的参考点在哪&#xff1f; CSS绝对定位&#xff08;position: absolute&#xff09;如何设置绝…

数据赋能(71)——数据要素:概念

从这期开始&#xff0c;可能讨论数据相关的更高层次的话题——数据要素。讨论数据要素目的&#xff0c;是为了从一个更为宏观的视野去审视数据及数据赋能。这不仅有助于我们深入理解数据的本质与潜在价值&#xff0c;更能为数据的充分利用与未来发展提供更广阔的视角与思路。 …

公共交通无障碍设施:科技翅膀助力盲人出行新飞跃

在城市的脉络中&#xff0c;公共交通扮演着连接每一个角落的重要角色。然而&#xff0c;对于视力受限的盲人朋友而言&#xff0c;这幅繁忙而复杂的交通网络往往隐藏着诸多不易察觉的障碍。值得庆幸的是&#xff0c;随着公共交通无障碍设施的不断完善&#xff0c;以及高科技辅助…

设计模式 装饰模式

文章目录 装饰模式简介装饰模式结构装饰模式代码 装饰模式简介 装饰器模式&#xff08;Decorator Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许向现有对象动态添加新功能&#xff0c;而不需要修改其现有代码&#xff0c;并且可以通过组合多个装饰器对象实现多种…

org.yaml.snakeyaml.scanner.ScannerException: while scanning a simple key 。。。

控制台信息&#xff1a; 这个信息一般是yml文件配置出现了问题&#xff0c;如 出现非法数据 、缩进有问题等 问题地方如下&#xff0c;修改一下就好了 控制台一般报的这种错就是配置文件的格式不正确

FileLink内外网文件摆渡系统产品介绍

在现代企业中&#xff0c;往往存在着多个网络、系统之间的数据孤岛问题&#xff0c;数据难以互相访问和共享。 一、常用的内外网文件摆渡方式 传统的数据交换方式往往需要人工介入&#xff0c;效率低下且容易出错。如&#xff1a;U盘、FTP、VPN等&#xff0c;极易引发各种各样…