el-datepicker此刻按钮点击失效

news2024/11/9 2:08:12

文章目录

  • 此刻按钮失效原因:使用了禁用未来日期
  • 解决办法:重写此刻按钮点击事件
    • 代码(包含禁用未来日期和时分秒的处理)
    • 框出主要代码(因为包含禁用日期功能)(取你所需)

此刻按钮失效原因:使用了禁用未来日期

尝试将禁用日期延后几分钟,这样确实可用。如果禁用未来日期的同时,你又限制了时分秒(selectableRange)的选项,那设置延后也没用。
但是这样的操作又与禁用日期冲突;但是找到了问题原因。
延后1分钟处理

vue源码中此刻按钮的操作;
vue源码中此刻按钮的操作;

解决办法:重写此刻按钮点击事件

我研究了很久,没有从官方文档找到有效的解决办法。
只能通过事件重写来解决此问题了

代码(包含禁用未来日期和时分秒的处理)

此代码是基于这篇文章做的优化 el-datepicker禁用未来日期(包含时分秒)type=‘datetime’

<template>
  <div class="hello">
    <el-date-picker
      v-model="time"
      ref="datePicker"
      type="datetime"
      :picker-options="{
        disabledDate(time) {
          const nowTime = new Date()
          return new Date(time).getTime() > nowTime.getTime() + 1 * 60 * 1000
        },
        selectableRange
      }"
      @change="changeDate"
      @focus="dateFocus"
      @blur="dateBlur"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data() {
    return {
      time: '',
      selectableRange: '00:00:00-23:59:59',
      timer: null
    }
  },

  watch: {
    time(newTime, oldTime) {
      // 在滚动选择时分秒的时候也会被 watch 监听到
      // 在这里判断 如果年月日相同,就不再去更新。
      const sameDay = new Date(newTime).toLocaleDateString() === new Date(oldTime).toLocaleDateString()
      if (sameDay) return
      this.updateSelectableRange()
    }
  },

  methods: {
    // 日期选择框聚焦:重写事件
    // 聚焦后才会弹出日期选择框
    // 所以使用 $nextTick 等待日期选择窗口挂载后去操作dom
    async dateFocus() {
      await this.$nextTick()
      const btn = document.querySelector('.el-picker-panel.el-popper .el-picker-panel__footer span')
      btn && btn.addEventListener('click', this.changeToNow)
    },

    // 重写此刻方法
    changeToNow() {
      const datePicker = this.$refs.datePicker
      // 更新 time
      this.time = new Date().toLocaleString().replaceAll('/', '-')
      // 切换日期后,主动更新selectableRange(及时更新时分秒的禁用范围)
      this.updateSelectableRange()
      // 在隐藏日期选择器之前接触绑定事件
      this.dateBlur()
      // 隐藏日期选择框
      datePicker.hidePicker()
    },

    // 失去焦点:接触事件绑定
    dateBlur() {
      const btn = document.querySelector('.el-picker-panel.el-popper .el-picker-panel__footer span')
      btn && btn.removeEventListener('click', this.changeToNow)
    },

    updateSelectableRange() {
      const nowTime = new Date()
      const isSame = new Date(this.time).toLocaleDateString() === nowTime.toLocaleDateString()
      this.clearTimer()

      if (isSame) {
        this.selectableRange = `00:00:00-${nowTime.getHours()}:${nowTime.getMinutes()}:${nowTime.getSeconds()}`

        // 创建一个定时器,每分钟更新去更新一次禁用范围。
        const delay = 60 - nowTime.getSeconds()
        this.timer = setTimeout(() => {
          this.updateSelectableRange()
        }, delay * 1000)
        return
      }
      this.selectableRange = '00:00:00-23:59:59'
    },

    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },

    changeDate() {
      // 选中日期之后清除掉定时器
      this.clearTimer()
    }
  }
}
</script>

框出主要代码(因为包含禁用日期功能)(取你所需)

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

shodan3,vnc空密码批量连接,ip历史记录查找

shodan语法&#xff0c;count&#xff0c;honeyscore count 今天带大家继续学习shodan&#xff0c;今天会带大家学一学这个count命令&#xff0c;再学学其他小命令好其实关键命令也没那么多&#xff0c;就是很方便记忆一下就学会了这样子。 shodan count "/x03/x00/x00…

node和npm

背景&#xff08;js&#xff09; 1、为什么js能操作DOM和BOM? 原因&#xff1a;每个浏览器都内置了DOM、BOM这样的API函数 2、浏览器中的js运行环境&#xff1f; v8引擎&#xff1a;负责解析和执行js代码 内置API&#xff1a;由运行环境提供的特殊接口&#xff0c;只能在所…

【Eclipse系列】eclipse快捷键和设置

本文以4.24版本为例&#xff0c;详细介绍一下常用快捷键&#xff0c;以及如何设置 一、常用快捷键 1.1、代码注释 Ctrl / &#xff1a;注释或取消当前行。Ctrl Shift C&#xff1a;注释或取消当前行。Ctrl Shift / &#xff1a;注释多行。Ctrl Shift \ &#xff1a;取…

图解Redis 05 | Zset数据类型的原理及应用场景

介绍 Zset 类型&#xff08;有序集合&#xff09;与 Set 类型相比&#xff0c;增加了一个排序属性 score。对于有序集合 Zset&#xff0c;每个元素由两个部分组成&#xff1a;一个是元素的值&#xff0c;另一个是用于排序的分数 score。 有序集合继承了Set中成员唯一&#xff…

1D+洪水淹没制图软件+山洪径流模拟与洪水危险性评价技术及典型地区洪水淹没及损失分析

1. 软件原理简介&#xff1a; 基于洪水频率计算得到的设计洪水成果&#xff0c;通过水位流量关系将常见年遇洪水的洪峰流量转化为水位&#xff0c;进一步结合洪泛平原DEM数据&#xff0c;采用GIS水文分析方法计算洪泛平原内任一栅格的水流流程&#xff0c;耦合一维水力学模拟计…

树莓派4处理器超频指南

概述 在树莓派4的系列硬件中&#xff0c;处理器都是基于Broadcom BCM2711&#xff0c;内部具有4个ARM Cortex-A72和VideoCore VI。如果仔细看&#xff1a;树莓派4B开发板用的是BCM2711B0&#xff0c;主频为 1.5GHz&#xff1b;而Pi 400&#xff08;Keyboard Computer&#xff…

【华为\荣耀、中兴、华三路由器IPV6设置】

华为\荣耀、中兴、华三路由器ipv6设置 华为\荣耀设置-路由器拨号情况下中兴设置-路由器拨号情况下华三设置-光猫拨号情况下&#xff08;待续&#xff09; 华为\荣耀设置-路由器拨号情况下 如图设置就行 中兴设置-路由器拨号情况下 中兴路由器有两个设置地方也是如图设置 …

浅析Android View绘制过程中的Surface

前言 在《浅析Android中View的测量布局流程》中我们对VSYNC信号到达App进程之后开启的View布局过程进行了分析&#xff0c;经过对整个App界面的View树进行遍历完成了测量和布局&#xff0c;确定了View的大小以及在屏幕中所处的位置。但是&#xff0c;如果想让用户在屏幕上看到…

免费送源码:Java+ssm+Springboot Springboot小型仪器公司生产管理系统 计算机毕业设计原创定制

摘 要 本论文主要论述了如何使用java语言开发一个Springboot小型仪器公司生产管理系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述小型仪器公司生产管理系统…

Java学习Day56:暴打舔狗!(SpringBoot)

1.springboot简介 核心能力&#xff1a;Spring容器、日志、自动配置AutoCongfiguration、Starters web应用的能力&#xff1a;MVC、嵌入式Web服务器 数据访问(持久化)&#xff1a;关系型数据库、非关系型数据库 强大的整合其他技术的能力 只要是Java中牛逼的技术&#xff0c…

nascpolarssh

安装cpolarCpolar快速入门教程&#xff1a;群晖NAS系列 - cpolar 极点云官网 设置ssh: 然后&#xff1a;ssh tobecpolard.26.tcp.cpolar.top -p 12774即可进入 跳板机&#xff1a; 设置端口转向ssh -f -N -L 23:localhost:22 tobe192.168.31.44 ssh tobecpolard.26.tcp.cpola…

相关矩阵图——Python实现

import matplotlib.pyplot as plt import numpy as np# 创建一些正常分布的数据 mean [0, 0] cov [[1, 1], [1, 2]] x, y np.random.multivariate_normal(mean, cov, 3000).T# Set up the axes with gridspec fig plt.figure(figsize(6, 6)) grid plt.GridSpec(4, 4, hspa…

学习笔记:黑马程序员JavaWeb开发教程(2024.10.30)

5.3 请求响应-请求-简单参数 客户端使用postman实现&#xff0c;服务端通过idea&#xff0c;又两种请求方式&#xff0c;springboot的更加简洁方便 对于RequestParam&#xff0c;可以通过设置requiredflase来让参数不是必须传递的 在请求参数过多的时候&#xff0c;可以将请求参…

rabbitmq高级特性(2)TTL、死信/延迟队列、事务与消息分发

目录 1.TTL 1.1.设置消息过期时间 1.2.设置队列过期时间 2.死信队列 2.1.介绍 2.2.演示 3.延迟队列 3.1.模拟实现延迟队列 3.2.延迟队列插件 4.事务与消息分发 4.1.事务 4.2.消息分发 1.TTL 所谓的ttl&#xff0c;就是过期时间。对于rabbitmq&#xff0c;可以设置…

pip使用

pip全称pip install package,是python第三方包sitepackage管理的工具&#xff0c;安装&#xff0c;卸载第三方包。安装python时可以选择安装pip&#xff0c;或自己安装pip 查看pip是否安装&#xff1a;pip --version 安装pip &#xff1a;pip python -m pip install --upgrade…

早期进程间的通信

目录 IO进程&#xff08;day06&#xff09; 无名管道 有名管道 信号 IO进程&#xff08;day06&#xff09; 无名管道 原理图 无名管道的特点 只能用于有亲缘关系之间的进程无名管道可以看成是一种特殊的文件&#xff0c;对于它的读写可以使用文件IO如read、write函数.无名管道是…

Linux系统块存储子系统分析记录

1 Linux存储栈 通过网址Linux Storage Stack Diagram - Thomas-Krenn-Wiki-en&#xff0c;可以获取多个linux内核版本下的存储栈概略图&#xff0c;下面是kernel-4.0的存储栈概略图&#xff1a; 2 存储接口、传输速度 和 协议 2.1 硬盘 《深入浅出SSD&#xff1a;固态存储核心…

Python爬虫入门篇!

毕设是做爬虫相关的&#xff0c;本来想的是用java写&#xff0c;也写了几个爬虫&#xff0c;其中一个是爬网易云音乐的用户信息&#xff0c;爬了大概100多万&#xff0c;效果不是太满意。之前听说Python这方面比较强&#xff0c;就想用Python试试&#xff0c;之前也没用过Pytho…

从0开始搭建一个生产级SpringBoot2.0.X项目(三)SpringBoot接口统一返回和全局异常处理

前言 最近有个想法想整理一个内容比较完整springboot项目初始化Demo。 SpringBoot接口统一返回和全局异常处理&#xff0c;使用ControllerAdvice ExceptionHandler 的组合来实现。 一、pom文件新增依赖 <dependency><groupId>com.alibaba</groupId><ar…

【MySQL】实战篇—项目需求分析:ER图的绘制与关系模型设计

在软件开发中&#xff0c;数据库是信息系统的核心部分&#xff0c;合理的数据库设计能够显著提高系统的性能和可维护性。 ER图&#xff08;实体-关系图&#xff09;是数据库设计的重要工具&#xff0c;它通过图形化的方式描述了数据实体及其相互关系&#xff0c;帮助开发者和设…