elementUI中的el-date-picker日期月份时间选择器禁用

2023-10-28

1.时间选择器禁用:当开始时间已经选择时,结束时间不能小于开始时间(即禁用结束时间选择器中开始时间前),反之亦然
在这里插入图片描述
template内容

<el-form-item label prop="startTime">
     <el-date-picker
       :value-format="valueFormat"
       clearable
       type="datetime"
       placeholder="开始时间"
       :picker-options="pickerOptionsStart"
        v-model="teamInfo.startTime"
       style="width: 100%;"
      ></el-date-picker>
 </el-form-item>
 <el-form-item label prop="endTime">
      <el-date-picker
       :value-format="valueFormat"
      clearable
       type="datetime"
       placeholder="结束时间"
       v-model="teamInfo.endTime"
       :picker-options="pickerOptionsEnd"
       style="width: 100%;"
     ></el-date-picker>
 </el-form-item>

script内容

export default {
  data(){
     return{
        teamInfo: {},
        valueFormat: "yyyy-MM-dd HH:mm:ss",
        pickerOptionsStart: {
        disabledDate: time => {
          //结束时间已选
          if (this.teamInfo.endTime) {
            return (
              time.getTime() >
              new Date(this.teamInfo.endTime - 8.64e7).getTime() //开始时间和结束时间可以选择同一天
              //8.64e7 是科学计数法 8.64乘以10的7次方,即为86400000也就是 1000*60*60*24 也就是一天的毫秒数
            );
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          //开始时间已选
          if (this.teamInfo.startTime) {
            return time.getTime() < new Date(this.teamInfo.startTime).getTime();
          }
        }
      },
    }
}

2.禁用指定月份
在这里插入图片描述
代码:

<template>
	<el-date-picker 
	     v-model="listQuery.date"
	     format="yyyy-MM"
	     value-format="yyyy-MM"
	     type="month" 
	     placeholder="选择年月"
	     :picker-options="pickerOptions">
	</el-date-picker>
</template>
export default {
   data(){
      return{
         pickerOptions: {
          disabledDate(time) { 
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear(); // 获取时间选择器的年份 
          let timemonth = time.getMonth() + 1; // 获取时间选择器的月份
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          const elTimeData = timeyear.toString() + timemonth.toString(); 
          //小于指定时间都不可选
          return elTimeData < 202110;   
          },
        },
      }
   }
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

elementUI中的el-date-picker日期月份时间选择器禁用 的相关文章

  • 使用 jquery 淡入/淡出

    我正在研究我的学生项目 我是新的 jquery 对于该项目 我必须使用 jquery 来增强一些功能 并且我已经学到了很多来执行基本任务 但我陷入了一些非常令人困惑的事情 我的一个脚本实际上在鼠标悬停在功能上时更改了 div 容器的图像 功
  • 使用 Javascript 实现 Tinder 风格的拖放手势?

    我正在尝试找出哪些库可以用于仅使用 Javascript 的 Tinder 风格拖放手势 需要创建一个响应拖动手势的 HTML 元素 触摸并按住时 允许元素跟随用户的手指移动 当用户移开手指时 该元素会 动画回到原来的位置 如果元素在释放时
  • 如何在React-Native中选择ListView的一项?

    我是 React Native 的新手 我想使用 ListView 选择一项 当我第一次按下 item 时 ListView renderRow 被调用 但终究不起作用 我该如何修复这个错误 我的问题出在哪里 我写了一个演示here htt
  • Node.js Google-云存储上传目的地规范

    我有一个 Node js 服务器并且正在使用谷歌云上传一些图像文件的包Firebase 存储 上传本身工作正常 但 google cloud API 似乎只能将文件上传到 Firebase Storage 根文件夹 有没有办法指定远程位置来
  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 将其作为参数传递给 addEventListener()

    我想添加change一组复选框的事件 我如何访问this在我的事件函数中 这样当我执行事件时我可以访问复选框的值 这是我当前的代码 var checkboxes document getElementsByClassName cb Arra
  • 将 javascript 放在 header 之外有多糟糕?

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用
  • toJSON() 和 JSON.Stringify() 之间的区别

    如果您需要读取或克隆模型的所有数据属性 请使用其 toJSON 方法 此方法返回属性的副本作为 对象 尽管有其名称 但不是 JSON 字符串 当 JSON stringify 为 使用 toJSON 方法传递一个对象 它将返回的字符串化 t
  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali
  • 'DOMException:使用'option:selected'选择器时无法在'Element'上执行'querySelectorAll'

    我正在运行一个页面 该页面在以下行中引发错误 var label select find option selected html select find option first html 为了完整起见 这里是完整的 jQuery 函数
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • D3 时间解析返回 null

    根据此页面上的说明 https github com mbostock d3 wiki Time Formatting https github com mbostock d3 wiki Time Formatting我正在尝试解析 ISO
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • JavaScript 按名称获取当前作用域中的变量

    所以我有一个变量和该变量名称的字符串 function Factory string var foo bar console log foo is equal to this string 如果变量所在的对象是当前对象 如何从字符串文字中获
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • 正则表达式获取两个方括号之间的数字

    您好 我需要使用正则表达式在 JavaScript 中获取两对方括号内的字符串 这是我的字符串 12 23 asd 到目前为止我尝试的是使用这种模式 d 我需要获得价值12使用正则表达式 您可以使用以下正则表达式 d 这将提取12 from
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • onClick 事件适用于触摸屏设备上的触摸吗?

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏
  • 自动更改 Twitter Bootstrap 选项卡

    我希望 Twitter Bootstrap 选项卡按时间顺序更改 我使用它们有点像旋转木马 我希望选项卡每 10 秒切换到下一个选项卡 这是一个例子 http library buffalo edu http library buffalo
  • 保留对 React 状态变量的“引用”

    据我所知 Javascript 中没有指针 我有以下问题 但我想知道是否有一个解决方案让我无法解决 解决方案可能是普通的 Javascript 或者像 Context API 这样的 React js 钩子 useContext 或者更多

随机推荐

  • Mysql复制表中数据给另一张表

    个人简介 个人主页 摸鱼 文酱博客主页 博客领域 java编程基础 mysql 写作风格 干货 干货 还是tmd的干货 精选专栏 Java mysql 算法刷题笔记 博主的码云gitee 平常博主写的程序代码都在里面 支持博主 点赞 收藏
  • anaconda创建、删除虚拟环境指令

    使用 c o n d a 创建 删除虚拟环境指令
  • 动态分区、虚拟内存、分页存储、分段存储 简介

    动态分区的特点 分区的个数和大小可变 存在内存碎片 动态分区 就是动态的判断某一块的内存空间能否存储 不会找到刚刚好的 一般都是能放进去就放了 其他剩下的区域 又交给其他程序进行存储 然后几轮下来 就会存在很小的空间 无法利用 这就是内存的
  • OAuth基础介绍

    什么是OAuth OAuth是为解决应用之间 网站之间互相访问的一种简单 标准 安全的API授权协议 官网对其的定义 An open protocol to allow secure API authorization in a simpl
  • 面试题 03.02. 栈的最小值-辅助栈做法

    面试题 03 02 栈的最小值 请设计一个栈 除了常规栈支持的pop与push函数以外 还支持min函数 该函数返回栈元素中的最小值 执行push pop和min操作的时间复杂度必须为O 1 示例 MinStack minStack new
  • 计算梯度的三种方法: 数值法,解析法,反向传播法

    coding gbk function f x y z x y z first method 解析法 def grad1 x y z dx z dy z dz x y return dx dy dz second method 数值法 de
  • List接口及其实现类

    List接口 鉴于Java中数组用来存储数据的局限性 我们通常使用List替代数组 List集合类中元素有序 且可重复 集合中的每个元素都有其对应的顺序索引 List容器中的元素都对应一个整数型的序号记载其在容器中的位置 可以根据 序号存取
  • Linux无法连通外网情况下缺少依赖(CentOS7环境)

    在有外网的情况下 可以用yum很容易的完成服务及其相关依赖的安装 而由于客户要求 导致生产服务器上无法连通外网 于是在搭建生产环境的时候 由于外网不通 导致缺少依赖的问题频频出现 现将解决此类问题的方法归纳如下 直接下载 此方法适用于缺少单
  • GD32F103调试小记(二)之USART(接收中断、接收空闲中断+DMA、发送DMA)

    前言 上篇文章摸完了GD32F103调试小记 一 之ADC DMA 接下来摸下GD32的USART DMA 数据的搬运工 CPU的好助手 USART 一种串行通信协议 说白了就是让两根线按照一定的规律去切换高低电平 根据一个单位时间内高低电
  • Linux基础—系统结构介绍(一)

    一 系统结构由内核 shell 文件系统 应用程序一起组合而成的文件操作系统 它们使得用户可以运行程序 管理文件 资源调度 计算 1 Linux 内核由如下几部分组成 SCI 层系统调用接口 虚拟文件系统 内存管理 进程管理 设备驱动程序
  • Ubuntu下 Hyperledger Farbic 环境配置

    Hyperledger Farbic Hyperledger作为IBM旗下主推的区块链 是首个面向企业的开放区块链技术的重要探索 现阶段也推出了1 0稳定版本 虽然IBM也有相关的配置文档 并且完善度十分高 但是依旧有些坑点 配置目录 以下
  • 人脸检测算法YuNet再次提升,参数量降至54K

    我们的人脸检测项目libfacedetection是2015年创建的开源项目 算法模型为YuNet 已经持续维护8年至今 在GitHub上已经获得11 7K星 欢迎大家三连 使用 反馈和建议 2022 2023年我们对训练部分进行了大幅改进
  • 让安全动起来

    山石网科带你 分分钟拿下靶标 一 信息收集 信息收集是整个攻击流程当中最重要的一步 从 web 入手 首先需要收集子域名 可以通过枚举的方式收集子域名 例如经典的 layzer子域名挖掘机 另外还可以通过搜索引擎收集子域名 例如 fofa
  • js对数据进行加密(账户密码加密)@莫成尘

    先看代码 复制使用即可 这是一个比较常用的场景我们借助了 crypto es gt vue3 crypto es gt vue2 库 如您满意请给莫成尘点个star 将他封装为单独的js文件 import CryptoJS from cry
  • Fabric CA国密版本的一种替代方案--使用cryptogen工具增加新用户

    在Fabric超级账本中 如果我们想动态增加用户发行证书 一般会使用Fabric CA或者其它CA 然而在国密改造场景中 当前缺乏可用的开源的Fabric CA国密版本 因此 笔者研究了一下 发现了一种可不使用CA直接使用cryptogen
  • 7-2 交换最小值和最大值 (15分)

    7 2 交换最小值和最大值 15分 本题要求编写程序 先将输入的一系列整数中的最小值与第一个数交换 然后将最大值与最后一个数交换 最后输出交换后的序列 注意 题目保证最大和最小值都是唯一的 输入格式 输入在第一行中给出一个正整数N 10 第
  • Chapter5 --Clocks(时钟及虚拟时钟)

    文章目录 5 3 create clock 5 3 1 Specifying Clock Period 5 3 2 Identifying the Clock Source 5 3 3 Naming the Clock 5 3 4 Spec
  • 操作系统处理机调度及常见的调度算法

    处理机调度的层次 高级调度 高级调度又称为作业调度或长程调度 其主要功能是根据某种算法 把外存上处于后备队列中的那些作业调入内存 也就是说 它的调度对象是作业 中级调度 又称为中程调度 引入中程调度的目的是为了提高内存利用率和系统吞吐量 中
  • IDEA与IDEA(2020.1版本)的安装

    DEA简介 IDEA 全称 IntelliJ IDEA 是 Java 语言开发的集成环境 IntelliJ 在业界被公认为最好的 Java 开发工具之一 IDEA 是 JetBrains 公司的产品 这家公司总部位于捷克共和国的首都布拉格
  • elementUI中的el-date-picker日期月份时间选择器禁用

    1 时间选择器禁用 当开始时间已经选择时 结束时间不能小于开始时间 即禁用结束时间选择器中开始时间前 反之亦然 template内容