vue el-date-picker中datetime类型对今天之后的日期包含时分禁用

vue el-date-picker中datetime类型对今天之后的日期包含时分禁用

在这里插入图片描述

目前对选择秒那一列未禁用


<template>
  
      <div>
        <el-date-picker
            v-model="deactivateTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="请选择时间"
            :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      
</template>

<script>
export default {
  
  watch: {
   
    deactivateTime:{
      handler(newValue,oldValue){
        if(newValue == oldValue) {
          return;
        }
        this.selectableRange = this.timeRange(newValue);
      },
      immediate: true
    }
  },
  data () {
    return {
     deactivateTime: '',
      selectableRange: []
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        selectableRange: this.selectableRange,
      }
    }
    },
  mounted () { },
  methods: {
    initDateTime (date) {
      var dt = new Date(date)
      var h = dt.getHours() //获取时
      var m = dt.getMinutes() //获取分
      var s = dt.getSeconds() //获取秒
      if (h < 10) {
        h = '0' + h
      }
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return  h + ':' + m + ':' + s
    },
    timeRange(val) {

      if(val) {
        return new Date(val).getTime() < new Date().getTime() ? ['00:00:00 - 23:59:59'] : [`00:00:00 - ${this.initDateTime(new Date())}`]
      } else {
        return ['00:00:00 - 23:59:59']
      }
    },
    


  },
};
</script>

需要注意: el-date-picker的selectable-range属性不支持秒级的选择范围。该属性只能用于限制年、月、日、小时和分钟的选择范围。所以目前对选择秒那一列未禁用

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

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

相关文章

Unity 通过代码将一张大图切成多个小图的方法

在Unity 中要通过代码将一张贴图切割成多张小图&#xff0c;可以使用以下方法&#xff1a; /// <summary>/// 把一张图片切割成多张使用/// </summary>/// <param name"texture">原图</param>/// <param name"rows">切割的行…

SQL进阶理论篇(十三):数据库的查询优化器是什么?

文章目录 简介什么是查询优化器查询优化器的两种优化方式总结参考文献 简介 事务可以让数据库在增删改查的过程中&#xff0c;保证数据的正确性和安全性&#xff0c;而索引可以帮数据库提升数据的查找效率。查询优化器&#xff0c;则是帮助我们获取更高的SQL查询性能。 本节我…

持续集成交付CICD:K8S 自动化完成前端项目应用发布与回滚

目录 一、实验 1.环境 2.GitLab新建项目存放K8S部署文件 3.Jenkins手动测试前端项目CD 流水线代码&#xff08;下载部署文件&#xff09; 4. 将K8S master节点配置为jenkins从节点 5.K8S 手动回滚前端项目版本 6.Jenkins手动测试前端项目CD 流水线代码&#xff08;发布应…

空间转录组 多样本整合分析—stlearn

大家好&#xff0c;今天介绍一款空间转录组整合分析的python软件——stlearn。 如果你还不会安装&#xff0c;可以看下之前的推文&#xff0c;windows系统本地安装stlearn&#xff1a;本地安装jupyterlab&#xff0c;并创建conda小环境——以空间转录组细胞互作之stlearn安装为…

设计模式——0前言目录

1 设计模式介绍 应当站在产品经理的角度来学习设计模式 是软件设计中常见问题的典型解决方案&#xff0c;可用于解决代码中反复出现的设计问题 学习效果一般的原因在于自己没有站在产品经理的角度学习&#xff0c;仅仅是为了学习怎么实现&#xff0c;用什么算法实现。 分类&…

telnet的交互原理(wireshark分析)

telnet的交互原理&#xff08;wireshark篇&#xff09; telnet的协议类型是tcp&#xff0c;他的密钥用的是明文的&#xff0c;容易被捕获&#xff0c;所以后来的windows基本弃用了telnet服务端但依然保留了客户端。 下面是他的交互抓包&#xff1a; 这里面的前三条运用的是tc…

一种基于外观-运动语义表示一致性的视频异常检测框架 论文阅读

A VIDEO ANOMALY DETECTION FRAMEWORK BASED ON APPEARANCE-MOTION SEMANTICS REPRESENTATION CONSISTENCY 论文阅读 ABSTRACT1. INTRODUCTION2. PROPOSED METHOD3. EXPERIMENTAL RESULTS4. CONCLUSION阅读总结&#xff1a; 论文标题&#xff1a;A VIDEO ANOMALY DETECTION FRA…

【工作流Activiti】MyActivit的maven项目

1、Idea新建一个项目MyActivit的maven项目 2、安装插件 在 idea 里面&#xff0c;activiti 的插件叫 actiBPM&#xff0c;在插件库里面把它安装好&#xff0c;重启 idea 就行了。 3、 maven 项目中&#xff0c;并更改 pom.xml。pom 中依赖如下&#xff1a; <?xml version…

IntelliJ IDE 插件开发 | (三)消息通知与事件监听

系列文章 IntelliJ IDE 插件开发 |&#xff08;一&#xff09;快速入门IntelliJ IDE 插件开发 |&#xff08;二&#xff09;UI 界面与数据持久化IntelliJ IDE 插件开发 |&#xff08;三&#xff09;消息通知与事件监听 前言 在前两篇文章中讲解了关于插件开发的基础知识&…

【数据结构】二叉树的模拟实现

前言:前面我们学习了堆的模拟实现&#xff0c;今天我们来进一步学习二叉树&#xff0c;当然了内容肯定是越来越难的&#xff0c;各位我们一起努力&#xff01; &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &…

14 v-model绑定输入框

概述 v-model用于实现双向数据绑定&#xff0c;使用v-model绑定输入框是Vue3中最常见的用法之一。 比如&#xff0c;在制作登录界面的时候&#xff0c;我们会使用v-model绑定用户名和密码&#xff0c;这里的用户名和密码都是输入框。 基本用法 我们创建src/components/Demo…

nodejs+vue+微信小程序+python+PHP影片数据爬取与数据分析-计算机毕业设计推荐

管理页面&#xff1a;管理员和用户都可以登录。通过输入账号和密码后&#xff0c;校验无误后方可进入对应的主界面&#xff0c;管理员可对用户使用的权限管理&#xff0c;以及对网站信息进行管理[9]。  影片数据爬取与数据分析分为两个部分&#xff0c;即管理员和用户。该系统…

C/C++编程中的算法实现技巧与案例分析

C/C编程语言因其高效、灵活和底层的特性&#xff0c;被广大开发者用于实现各种复杂算法。本文将通过10个具体的算法案例&#xff0c;详细探讨C/C在算法实现中的技巧和应用。 一、冒泡排序&#xff08;Bubble Sort&#xff09; 冒泡排序&#xff08;Bubble Sort&#xff09;是一…

[Toolschain cpp ros cmakelist python vscode] 记录写每次项目重复的设置和配置 不断更新

写在前面 用以前的设置&#xff0c;快速配置项目&#xff0c;以防长久不用忘记&#xff0c;部分资料在资源文件里还没有整理 outline cmakelist 复用vscode 找到头文件vscode debug现有代码直接关联远端gitros杂记repo 杂记glog杂记 cmakelist 复用 包含了根据系统路径找库…

各种不同语言分别整理的拿来开箱即用的8个开源免费单点登录(SSO)系统

各种不同语言分别整理的拿来开箱即用的8个开源免费单点登录&#xff08;SSO&#xff09;系统。 单点登录&#xff08;SSO&#xff09;是一个登录服务层&#xff0c;通过一次登录访问多个应用。使用SSO服务可以提高多系统使用的用户体验和安全性&#xff0c;用户不必记忆多个密…

学习Java第74天,Ajax简介

什么是ajax AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部分网页…

限流原理与实践:固定窗口、滑动窗口、漏桶与令牌桶解析

方案一、固定窗口限流算法 这里我们通过一个 demo 来介绍固定窗口限流算法。 创建一个 FixWindowRateLimiterService 类。 Service public class FixWindowRateLimiterService {Resourceprivate StringRedisTemplate stringRedisTemplate;private static final DefaultRedisSc…

HCIP —— BGP 基础实验

实验拓扑&#xff1a; 实验要求&#xff1a; 1.所有设备上均有环回接口 2.R1属于AS 100 &#xff0c;R2-R4 属于AS 200 &#xff0c;R5 属于AS 300 3.R2 - R4 属于同一个area &#xff0c;运行OSPF。 4.全网通过运行BGP实现网络互通。 实验步骤&#xff1a; 1.配置 IP地址…

Node.js使用Express框架写服务端接口时,如何将接口拆分到不同文件中

项目目录结构说明&#xff1a; node.js连接mysql数据库步骤可参考&#xff1a;Node.js 连接 MySQL | 菜鸟教程 1、拆分之前的写法&#xff0c;未区分模块&#xff0c;所有接口api都写在了入口文件app.js中&#xff1b; 需求&#xff1a;想要将接口api拆分成根据不同的业务模块…

window10下载与安装zookeeper,图文说明

1&#xff0c;下载 打开连接 &#xff1b;https://downloads.apache.org/zookeeper/ 选择版本下载 2&#xff0c;解压 cmd黑窗口解压命令 tar -zxvf apache-zookeeper-3.8.3-bin3&#xff0c;修改配置 复制zoo_sample.cfg&#xff0c;重命名为zoo.cfg zoo.cfg配置 # The …