element-plus DateTimePicker日期选择器,限制指定日期和时间不可选择

news2024/11/19 1:46:12

element-plus日期选择器,在指定日期时间前不可选择。
限制日期选择,使用disabled-date
限制小时选择,使用disabled-hours
限制分钟选择,使用disabled-minutes
限制毫秒选择,使用disabled-seconds

指定日期当天的时间有限制:
在这里插入图片描述
其他日期的时间无限制:
在这里插入图片描述

全部代码:

      <el-date-picker
          v-model="state.value"
          type="datetime"
          :default-time="new Date()"
          :disabled-date="disabledDateFn"
          :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes"
          :disabled-seconds="disabledSeconds"
          value-format="YYYY-MM-DD HH:mm:ss"
          :placeholder="请选择" />
const state = reactibe({
   value:'',
  lastDate:'2023-10-27 12:20:30'
})

// 限制日期
const disabledDateFn = (date) => {
  if (date.getTime() < new Date(state.lastDate).getTime() - 8.64e7) {
    return true;
  }
  return false;
};

// 限制小时
const disabledHours = () => {
  const a = [];
  //选中的年月日
  const value = dayjs(state.value).format('YYYY-MM-DD');
  //指定日期的年月日
  const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');
  // 选中日期不等于指定日期,不限制
  if (value !==lastDate) {
    return;
  }
  
  for (let i = 0; i < 24; i++) {
    if (new Date(state.lastDate).getHours() > i) {
      a.push(i);
    }
  }
  return a;
};

// 限制分钟
const disabledMinutes = () => {
  const a = [];
  const value = dayjs(state.value).format('YYYY-MM-DD');
  const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');
   if (value !==lastDate) { {
    return;
  }
  for (let i = 0; i < 60; i++) {
    if (new Date(state.lastDate).getMinutes() > i) {
      a.push(i);
    }
  }
  return a;
};

// 限制毫秒
const disabledSeconds = () => {
  const a = [];
  const value = dayjs(state.value).format('YYYY-MM-DD');
  const lastDate = dayjs(state.lastDate).format('YYYY-MM-DD');
 if (value !==lastDate){
    return;
  }
  for (let i = 0; i < 60; i++) {
    if (new Date(state.lastDate).getSeconds() > i) {
      a.push(i);
    }
  }
  return a;
};

注意:选择面板上的日期后,v-model绑定的值就会更新,而不是点击确认按钮后!!!

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

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

相关文章

一带一路10周年:爱创科技加速中国药企国际化征程

“源自中国&#xff0c;属于世界”。 共建“一带一路”倡议提出10周年来&#xff0c;中国与沿线国家经济深度融合&#xff0c;在共商共建共享的基本原则下&#xff0c;“一带一路”形成了国际合作的平台和机制&#xff0c;跨国经济合作已基本形成。 随着“一带一路”合作日益加…

【脚本笔记】AssetDatabase

AssetDatabase是编辑器下的处理资源操作的重要类&#xff0c;主要用于访问资源并针对资源执行操作的接口。 这里面所有的操作路径都是基于Unity项目的相对路径也就是Assets/xxx或者Assets/xxx.jpg这种。CacheServer 主要解决的是缩短大型团队导入资源的时间。当配置后&#xff…

K8S部署应用时从harbor拉取镜像失败

问题描述 K8S部署服务拉取镜像失败&#xff1a;ImagePullBackOff K8S拉取镜像提示&#xff1a;Failed to pull image “IP:PORT/zcy-project/nginx:1.16.1”: rpc error: code Unknown desc Error response from daemon: unauthorized: unauthorized to access repository: …

mediapipe 训练自有图像数据分类

参考&#xff1a; https://developers.google.com/mediapipe/solutions/customization/image_classifier https://colab.research.google.com/github/googlesamples/mediapipe/blob/main/examples/customization/image_classifier.ipynb#scrollToplvO-YmcQn5g 安装&#xff1a…

配音软件怎么选?推荐三款自用好评的

会刷短视频的小伙伴肯定知道&#xff0c;很多创作者想让自己的视频更加丰富&#xff0c;呈现更加完美的视频效果&#xff0c;往往会在视频里的空境部分加入一些旁白解说&#xff0c;你们难道就不好奇吗&#xff1f;这些声音为什么这么想真人说的话&#xff0c;而且还可以这么自…

虚幻C++基础 day1

虚幻C概念 虚幻C类的继承结构 虚幻引擎C类层级结构(Hierarchy) 这些基本类又派生出了很多子类&#xff0c;例&#xff1a; UE中的反射与垃圾回收系统 例如一个创建了一个Actor类&#xff0c;有一个Actor类型指针去指向这个Actor类&#xff0c;如果的指针被销毁了&#xff…

编译环境里存在yaml-cpp的多个版本时可能引起的问题

有时要编译的程序自带了特定版本的yaml-cpp&#xff0c;同时系统目录下也安装了更高版本的yaml-cpp&#xff0c;这时可能引起编译错误&#xff0c;就是某些yaml-cpp的API不认识&#xff0c;例如&#xff1a; 出现这种问题倒好办&#xff0c;正常情况下不可能&#xff0c;肯定能…

目标检测算法发展史

前言 比起图像识别&#xff0c;现在图片生成技术要更加具有吸引力&#xff0c;但是要步入AIGC技术领域&#xff0c;首先不推荐一上来就接触那些已经成熟闭源的包装好了再提供给你的接口网站&#xff0c;会使用别人的模型生成一些图片就能叫自己会AIGC了吗&#xff1f;那样真正…

电脑突然提示找不到msvcp140.dll怎么办,解决msvcp140.dll丢失的办法

当我们在电脑上运行某些软件或游戏时&#xff0c;可能会遇到一个常见的错误消息&#xff1a;“找不到msvcp140.dll”。出现这样的情况通常意味着系统缺少一个重要的动态链接库文件&#xff0c;而这可能会导致程序无法正常启动。如果你现在遇到了这个问题&#xff0c;哪有可以用…

人大与加拿大女王大学金融管理硕士项目:开启国际视野,成就金融领袖

生活中&#xff0c;我们总会遇到各种各样的困难和挑战。有时候&#xff0c;我们会感到沮丧、迷茫甚至绝望。但是&#xff0c;正是这些困难和挑战&#xff0c;让我们变得更加坚强、勇敢和成熟。在这个职场竞争愈发激烈的时代&#xff0c;不断地充实自己是非常重要的。如果你从事…

Echats-页面切换时echats图表刷新

在src文件夹下的composables创建echats.ts echats.ts的内容为&#xff1a; import { nextTick, effectScope, onScopeDispose, ref, watch } from vue; import type { ComputedRef, Ref } from vue; import * as echarts from echarts/core; import { BarChart, GaugeChart, L…

Golang | Zinx学习笔记(一)

参考 http://zinx.me/ https://www.kancloud.cn/aceld/zinx/1960213 https://www.yuque.com/aceld/tsgooa/gx01meg5ow4pftac 说明 zinx是一个基于Golang的轻量级并发服务器框架。 目前zinx已经在很多企业进行开发使用&#xff0c;具体使用领域包括:后端模块的消息中转、长链…

Mybatis-Plus通用枚举功能 [MyBatis-Plus系列] - 第493篇

历史文章&#xff08;文章累计490&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 S…

win 下安装 nvm 的使用与配置

nvm 全名 node.js version management&#xff0c;是一个 nodejs 的版本管理工具。通过它可以安装和切换不同版本的 nodejs。 注&#xff1a;如果已经安装了 nodejs 需先卸载后再安装 nvm 为了确保 nodejs 已彻底删除&#xff0c;可以看看安装目录中是否有 node 文件夹&#x…

Linux|安装Nomachine

参考&#xff1a;2022 Nomachine 最简安装与使用指南&#xff08;https://blog.csdn.net/qq_51116518/article/details/127450253&#xff09; 解压 先将目录调整到压缩包所在目录&#xff0c;输入sudo tar zxvf nomachine_7.6.2_3_aarch64.tar.gz 添加权限 sudo chmod -R…

基于Cmake+QT+VS的C++项目构建开发编译简明教程

目前项目是尽量利用开源项目为基础&#xff0c;考虑到跨平台&#xff0c;以及后期便于开发的协同和延续&#xff0c;开发语言基于C/C、UI基于QT&#xff08;5.7.1&#xff09;&#xff0c;集成开发环境&#xff08;IDE&#xff09;使用Visual Studio&#xff08;2015&#xff0…

开心要笑,不开心就待会儿再笑,生活亦如此

90白鸭绒填充&#xff0c;给宝贝满满的安全感 厚实细腻上身真的很舒适&#xff0c;而且不会显得臃肿哦 杜邦三防面料的优点 防水防油防污&#xff0c;耐脏又实穿&#xff01;&#xff01;

Spring Cloud之API网关(Zuul)

目录 Zuul 简介 功能 工作流程 搭建 1.引入依赖 2.添加注解 3.路由转发 4.测试 实现原理 EnableZuulProxy注解 ZuulServlet FilterProcessor Zuul内置过滤器 常用配置 Zuul 简介 zuul是SpringCloud子项目的核心组件之一&#xff0c;可以作为微服务架构中的API网…

MappingMongoConverter原生mongo 枚举类ENUM映射使用的是name

j.l.IllegalArgumentException: No enum constant com.xxx.valobj.TypeEnum.stringat java.lang.Enum.valueOf