element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒

element-plus使用el-date-picker组件时,如何禁止用户选择当前时间之后的日时分秒

例:
当前时间为2023-11-15 14.24,不能选择这之后的时分秒。(禁止用户选择2023-11-15 14.28)
在这里插入图片描述

 <el-date-picker
  	   v-model="form.startTime"
       type="datetime"
       format="YYYY-MM-DD HH:mm:ss"
       value-format="YYYY-MM-DD HH:mm:ss"
       popper-class="no-now-date"
       :disabled-date="disabledDate"
       :disabled-hours="disabledHour"
       :disabled-minutes="disabledMinute"
     />
/* 限制天 */
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
/* 限制小时 */
const disabledHour = (time: Date) => {
  const arrs = []
  // 当前本地时间的当天00:00 时间戳
  const timeDay = dayjs().startOf('day').valueOf()
  // 当前选中时间的当天00:00 时间戳
  const timeActiveDay = dayjs(searchParams.value.startTime).startOf('day').valueOf()

  if (timeDay > timeActiveDay) {
    console.log('小时可以随便选择')
  } else {
    console.log('小时存在限制')
    for (let i = 0; i < 24; i++) {
      if (new Date().getHours() >= i) continue
      arrs.push(i)
    }
  }
  return arrs
}
/* 限制分 */
const disabledMinute = () => {
  const arrs = []
  // 当前本地时间的整点小时 时间戳
  const timeHour = dayjs().startOf('hour').valueOf()
  // 当前选中时间得整点小时 时间戳
  const timeActiveHour = dayjs(searchParams.value.startTime).startOf('hour').valueOf()
  if (timeHour > timeActiveHour) {
    console.log('分钟可以随便选择')
  } else {
    console.log('分钟存在限制')
    for (let i = 0; i < 60; i++) {
      if (new Date().getMinutes() >= i) continue
      arrs.push(i)
    }
  }
  return arrs
}
/* 限制秒 */
const disabledSecond = () => {
  const arrs = []
  // 当前本地时间的整点分钟 时间戳
  const timeMin = dayjs().startOf('minute').valueOf()
  // 当前选中时间得整点分钟 时间戳
  const timeActiveMin = dayjs(searchParams.value.startTime).startOf('minute').valueOf()
  if (timeMin > timeActiveMin) {
    console.log('秒可以随便选择')
  } else {
    console.log('秒存在限制')
    for (let i = 0; i < 60; i++) {
      if (new Date().getSeconds() >= i) continue
      arrs.push(i)
    }
  }
  return arrs
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

腾讯混元大模型与GPT3.5代码能力对比

今日&#xff0c;别的事情不干&#xff0c;来使用一下"腾讯混元大模型"。对比一下"GPT3.5"&#xff0c;看看效果。据说"腾讯混元大模型"代码方面是强项&#xff0c;特意申请了一个来体验一波。 ✨本章仅以Python为主题&#xff0c;展开体验。最后…

解决Jira导出csv最大限度是1000的问题

JIRA为了防止过多影响性能&#xff0c; 设置了导出CSV的上线为1000&#xff0c;影响了搜索结果导出以及RestAPI。 可以通过以下配置参数修改此限制&#xff1a; 通过JIRA管理界面的"高级设置 “设置以下参数 系统管理 > 系统 > 一般设置>高级设置找到 jira.sea…

如何将图片转为excel或word?(客户端)

演示软件&#xff1a;金鸣表格文字识别大师3.6.1&#xff08;新版本界面可能会略有不同&#xff09; 第一部分 将图片转为excel或文表混合的word 一般的软件要将图片转为可编辑的excel&#xff0c;都需要待识别的图片要有明显清晰的表格线&#xff0c;但我们程序现已克服了这…

vue-组件生命周期+网络请求

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件生命周期网络请求 目录 组件生命周期 1. Vue的生命周期 2. Vue 子组件和父组件执行顺序…

消息通讯-MQTT WebHookSpringBoot案例

一、EMQX WebHook介绍 1、EMQX WebHook 是由 emqx_web_hook (opens new window)插件提供的将EMQX中的钩子事件通知到某个Web服务的功能。 2、WebHook 的内部实现是基于钩子&#xff0c;借助 Webhook 可以完成设备在线、上下线记录&#xff0c;订阅与消息存储、消息送达确认等诸…

【开源】基于Vue和SpringBoot的固始鹅块销售系统

项目编号&#xff1a; S 060 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S060&#xff0c;文末获取源码。} 项目编号&#xff1a;S060&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…

绕过类安全问题分析方法

什么是绕过 逻辑漏洞是指程序设计中逻辑不严密&#xff0c;使攻击者能篡改、绕过或中断程序&#xff0c;令其偏离开发人员预期的执行。 常见表现形式 1、接口&#xff08;功能类&#xff09;绕过&#xff1a;即接口或功能中通过某参数&#xff0c;绕过程序校验 2、流程类绕…

[模版总结] - 树的基本算法2 - BST

BST定义 BST - Binary Search Tree, 即二叉搜索树(有序二叉树) 特性 中序遍历有序查找/插入/删除某个数值可以通过 即树的高度&#xff0c;最优,最坏 . 有多种改进BST可以动态维持插入删除后树结构能尽可能保持平衡 BST基本操作 查询 - 二分查找 搜索数值 - 二分法 class…

有Mac或无Mac电脑通用的获取安卓公钥的方案

从2023年9月开始&#xff0c;所有上架应用市场的app都需要进行APP备案。 其中后端服务器在阿里云的可以在阿里云备案&#xff0c;后端服务器在腾讯云的可以在腾讯云备案。但无论你是在什么云厂商里做备案&#xff0c;无一例外的是&#xff0c;无论是上架安卓应用还是上架IOS应…

Python大数据学习问题整理汇总

day01 分区表与分桶表的区别 在这里插入代码片day02 数据仓分层/与本质 数据仓库(OLAP)的本质叫联机分析处理, 一般针对某些主题的历史数据进行分析 主要面向分析,支持管理决策。源数据层&#xff08;ODS&#xff09;&#xff1a; 此层数据无任何更改&#xff0c;直接沿用外围…

【2021集创赛】基于arm Cortex-M3处理器与深度学习加速器的实时人脸口罩检测 SoC

团队介绍 参赛单位&#xff1a;深圳大学 队伍名称&#xff1a;光之巨人队 指导老师&#xff1a;钟世达、袁涛 参赛队员&#xff1a;冯昊港、潘家豪、慕镐泽 图1 团队风采 1. 项目简介 新冠疫情席卷全球&#xff0c;有效佩戴口罩可以极大程度地减小病毒感染的风险。本项目开发…

JWT登录认证(3拦截器)

Jwt登录认证&#xff08;拦截器&#xff09;&#xff1a; 使用拦截器统一验证令牌 登录和注册接口需要放行 interceptors.LoginInterceptor&#xff1a;&#xff08;注册一个拦截器&#xff09; package com.lin.springboot01.interceptors;import com.lin.springboot01.pojo.…

wpf devexpress添加TreeListControl到项目

此教程示范如何添加TreeListControl到项目和绑定控件自引用数据源&#xff1a; 添加数据模型 绑定tree&#xff0c;并添加如下字段到数据源对象&#xff1a; Key字段包含唯一值索引节点 Parent字段包含父索引节点 添加数据模型&#xff08;Employee和Staff类&#xff09;到…

物理驱动深度学习方法总结

一、物理驱动深度学习方法总结 现有博主更新物理驱动深度学方法总体介绍 二、 PINN介绍 PINN综述Blog介绍&#xff1a;内嵌物理知识神经网络 &#xff08;Physics Informed Neural Network&#xff0c;简称PINN&#xff09; 是一种科学机器在传统数值领域的应用方法&…

软件测试基础 —— 单元测试

Hello&#xff01;大家好&#xff0c;我是BugBear&#xff0c;一个专注于分享软件测试干货的测试开发。 对于软件测试&#xff0c;我们先按照开发阶段来进行划分&#xff0c;将软件测试分为单元测试、集成测试、系统测试、验收测试&#xff0c;下面我们来聊聊单元测试。 1、什…

JVM-HotSpot虚拟机对象探秘

目录 一、对象的实例化 &#xff08;一&#xff09;创建对象的方式 &#xff08;二&#xff09;创建对象的步骤 二、对象的内存布局 &#xff08;一&#xff09;对象头 &#xff08;二&#xff09;实例数据 &#xff08;三&#xff09;对齐填充 三、 对象的访问定位 &…

小迈迈驰组态软件支持国产龙芯2K1000等处理器

自2019年起&#xff0c;南京迈思德电气自动化有限公司组织研发团队&#xff0c;进行跨平台组态软件的研发&#xff0c;适配国产处理器&#xff0c;目前已经完成单机版产品的研发&#xff0c;并在基于龙芯2K1000处理器[Loongnix操作系统]的加固人机界面产品上应用。 Loongnix是龙…

可逆矩阵的性质

如果矩阵A可逆&#xff0c;那么它的逆矩阵也可逆&#xff0c;并且如果矩阵A可逆&#xff0c;假设是一个不为0的数&#xff0c;那么也可逆&#xff0c;并且如果矩阵A和都可逆&#xff0c;而且它们的阶数也相同&#xff0c;那么它们的乘积也是可逆的&#xff0c;并且如果矩阵A可逆…

docker数据卷详细讲解及数据卷常用命令

docker数据卷详细讲解及数据卷常用命令 Docker 数据卷是一种将宿主机的目录或文件直接映射到容器中的特殊目录&#xff0c;用于实现数据的持久化和共享。Docker 数据卷有以下特点&#xff1a; 数据卷可以在一个或多个容器之间共享和重用&#xff0c;不受容器的生命周期影响。…

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 进程管理 2》(6)

《Linux操作系统原理分析之Linux 进程管理 2》&#xff08;6&#xff09; 4 Linux 进程管理4.2 Linux 进程的状态和标识4.2.1 Linux 进程的状态及转换4.2.2 Linux 进程的标识4.2.3 进程标识哈希表 4 Linux 进程管理 4.2 Linux 进程的状态和标识 4.2.1 Linux 进程的状态及转换…