当前位置: 首页 > news >正文

el-datepicker此刻按钮点击失效

文章目录

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

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

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

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

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

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

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

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

<template><div class="hello"><el-date-pickerv-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) returnthis.updateSelectableRange()}},methods: {// 日期选择框聚焦:重写事件// 聚焦后才会弹出日期选择框// 所以使用 $nextTick 等待日期选择窗口挂载后去操作domasync 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// 更新 timethis.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>

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

在这里插入图片描述

在这里插入图片描述

相关文章:

el-datepicker此刻按钮点击失效

文章目录 此刻按钮失效原因&#xff1a;使用了禁用未来日期解决办法&#xff1a;重写此刻按钮点击事件代码&#xff08;包含禁用未来日期和时分秒的处理&#xff09;框出主要代码&#xff08;因为包含禁用日期功能&#xff09;&#xff08;取你所需&#xff09; 此刻按钮失效原…...

VUE组件学习 | 六、v-if, v-else-if, v-else组件

v-if、v-else-if 和 v-else 指令基础知识 在 Vue.js 中&#xff0c;v-if、v-else-if 和 v-else 是一组指令&#xff0c;用于根据表达式的值条件性地渲染元素。 基本语法 <template><div><!-- 基础条件渲染 --><h1 v-if"type A">类型 A&l…...

机器学习算法之回归算法

一、回归算法思维导图 二、算法概念、原理、应用场景和实例代码 1、线性回归 1.1、概念 ‌‌线性回归算法是一种统计分析方法&#xff0c;用于确定两种或两种以上变量之间的定量关系。‌ 线性回归算法通过建立线性方程来预测因变量&#xff08;y&#xff09;和一个或多个自变量…...

cordova android 内嵌vue页面 启动页之后白屏问题处理

困扰很久的问题 一直都用splash 做延迟加载 但在 一些android机器上还是会有 这短暂的白屏其实就是vue页面尚未完全渲染的间隙 处理方案 在html中添加 <body><div id"splash-screen" style"position: fixed; top: 0; left: 0; width: 100%; height: 1…...

自研小程序-心情追忆

在近期从繁忙的工作中暂时抽身之后&#xff0c;我决定利用这段宝贵的时间来保持我的Java技能不致生疏&#xff0c;并通过一个个人项目来探索人工智能的魅力。 我在Hugging Face&#xff08;国内镜像站点&#xff1a;HF-Mirror&#xff09;上发现了一个关于情感分析的练习项目&…...

【部署与升级-会议签到的web安装】

部署与升级-会议的远程安装 技术路线界面规划flaskAPI以及socketio.emit shellout浏览器和后端交互到处是偶遇 技术路线 运行的基础是Flask-Soketio, 并借鉴了后台运行系统指令的代码 和scrncpy项目,app安装的脚本 #mermaid-svg-8H9rbzbpgpnAXfA3 {font-family:"trebuche…...

【jvm】如何设置新生代和老年代的比例

目录 1. 说明2. 使用-XX:NewRatio参数3. 使用-Xmn参数4. 配置新生区中的Eden区和Survivor区比例5. 综合配置示例6. 注意事项 1. 说明 1.新生代&#xff08;Young Generation&#xff09;和老年代&#xff08;Old Generation&#xff09;的比例可以通过特定的参数进行设置。2.这…...

系统学习CFD,常见收敛问题、及如何与机器学习相结合

一、如何系统学习CFD 系统学习计算流体力学&#xff08;CFD&#xff09;需要按照一定的步骤和层次进行&#xff0c;以下是一个学习路径的建议&#xff1a; 1.基础知识学习&#xff1a; 掌握流体力学的基本原理&#xff0c;包括流体静力学、流体动力学、流体控制方程等。 学习…...

REST架构与实现

一、REST 架构风格 基本概念 REST(Representational State Transfer),即表述性状态转移,是一种软件架构风格。它通过使用标准的 HTTP 方法操作网络上的资源来实现信息交互。在 REST 架构风格中,网络上的一切都被抽象成资源,例如,在一个在线购物系统中,商品、订单、用户…...

AI驱动的低代码未来:加速应用开发的智能解决方案

引言 随着数字化转型的浪潮席卷全球&#xff0c;企业对快速构建应用程序的需求愈发强烈。然而&#xff0c;传统的软件开发周期冗长、成本高昂&#xff0c;往往无法满足快速变化的市场需求。在此背景下&#xff0c;低代码平台逐渐成为开发者和企业的优选方案&#xff0c;以其“低…...

快速上手 Rust——环境配置与项目初始化

Rust 跨界&#xff1a;全面掌握跨平台应用开发 第一章&#xff1a;快速上手 Rust 1.1 环境配置与项目初始化 1.1.1 安装 Rust 和 Cargo 在开始学习 Rust 之前&#xff0c;首先需要安装 Rust 编程语言及其包管理工具 Cargo。Rust 的安装非常简单&#xff0c;使用官方的安装脚…...

分布式事务Seata-AT模式

1. seata安装 docker 安装 docker run --name seata-server \-p 8091:8091 \-p 7091:7091 \-e SEATA_IP192.168.0.250 \-e SEATA_PORT8091 \seataio/seata-server将安装好的配置文件数据&#xff0c;拷贝一份到物理机 docker cp seata-serve:/seata-server/resources /User/…...

编程知识概览

编程&#xff0c;这个在现代社会中无处不在的词汇&#xff0c;已经从最初的计算机专业人士的专属技能&#xff0c;变成了许多人日常生活和工作中不可或缺的一部分。从简单的网页浏览、邮件发送&#xff0c;到复杂的游戏开发、数据分析&#xff0c;编程的应用几乎覆盖了所有领域…...

基于 GADF+Swin-CNN-GAM 的高创新扰动信号识别模型!

往期精彩内容&#xff1a; Python-电能质量扰动信号数据介绍与分类-CSDN博客 Python电能质量扰动信号分类(一)基于LSTM模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(二)基于CNN模型的一维信号分类-CSDN博客 Python电能质量扰动信号分类(三)基于Transformer的一…...

【Nextcloud】在 Ubuntu 22.04.3 LTS 上的 Nextcloud Hub 8 (29.0.0) 优化

[TOC](Nextcloud Hub 8 (29.0.0) 优化) Nextcloud 优化是个长期的过程&#xff0c;只能遇到问题解决问题了。遇到的问题和解决办法会逐步的编写完善。 打开 PHP 内存限制 伴随着内容增多&#xff0c;并添加更多的功能&#xff0c;访问 Nextcloud 变慢。通过修改PHP 内存限制&am…...

全渠道供应链打造中企业定制开发2+1链动模式S2B2C商城小程序的策略与影响

摘要&#xff1a;本文探讨了全渠道供应链打造对于零售企业的重要性及面临的挑战&#xff0c;着重分析了物流环节整合的难点&#xff0c;并以家电行业为例说明了节假日期间物流对企业经营的影响。同时&#xff0c;引入“企业定制开发21链动模式S2B2C商城小程序”这一关键因素&am…...

Github 2024-10-24 Go开源项目日报 Top10

根据Github Trendings的统计,今日(2024-10-24统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10Solidity项目1Ollama: 本地大型语言模型设置与运行 创建周期:248 天开发语言:Go协议类型:MIT LicenseStar数量:42421 个Fork数量:…...

中航资本:锂电行业现分化 优质产能仍然紧俏

2024年前三季度&#xff0c;受轻贱需求增速放缓影响&#xff0c;锂电工业堕入结构性供需错配&#xff0c;产品价格继续低迷&#xff0c;作业盈余全体承压。 当资料端不再稀缺&#xff0c;锂电作业由“卖方商场”转向“买方商场”&#xff0c;工业链博弈天平逐渐向轻贱倾斜。表…...

安宝特案例 | AR技术在院外心脏骤停急救中的革命性应用

00 案例背景 在院外心脏骤停 (OHCA) 的突发救援中&#xff0c;时间与效率直接决定着患者的生命。传统急救模式下&#xff0c;急救人员常通过视频或电话与医院医生进行沟通&#xff0c;以描述患者状况并依照指令行动。然而&#xff0c;这种信息传递方式往往因信息不完整或传递延…...

curl调用微信退款No required SSL certificate was sent

文章目录 前言一、错误一二、错误二 总结 前言 在之前的博客中提到微信证书到期了&#xff0c;需要更换&#xff0c;但是当我更换完证书自信满满的时候&#xff0c;却出现了两个问题&#xff0c;记录一下。 一、错误一 CURL Error: 58unable to load client key: -8178 (SEC_…...

SINAMICS V90伺服驱动器故障代码大全

SINAMICS V90伺服驱动器在运行过程中可能出现故障&#xff0c;导致设备停机。用户可通过BOP面板或调试软件查看故障代码&#xff0c;并根据以下信息判断故障原因及处理方法。序号报警号信息故障信息可能原因处理方法1F1000内部软件错误出现了一个内部软件错误。分析故障缓冲器为…...

从“共和国之辉”到AI原生应用:一个关于“哥布林”诞生的技术启示录

从“共和国之辉”到AI原生应用&#xff1a;一个关于“哥布林”诞生的技术启示录 2025年7月&#xff0c;一篇名为《Where the goblins came from》的文章在Hacker News上引发了超过710票的热议。当大多数技术评论者将目光聚焦于AI模型的最新突破时&#xff0c;这篇来自OpenAI的文…...

别再只装软件了!TIA Portal Openness安装后必做的用户组配置(Win10避坑指南)

别再只装软件了&#xff01;TIA Portal Openness安装后必做的用户组配置&#xff08;Win10避坑指南&#xff09; 当你兴冲冲地安装完TIA Portal和Openness组件&#xff0c;准备大展拳脚时&#xff0c;突然弹出一个"CAx操作无法启动"的错误提示——这种挫败感&#xf…...

开源项目可持续性挑战:从OpenOffice兴衰看企业技术选型策略

1. 开源软件的理想与现实&#xff1a;从OpenOffice的兴衰谈起几年前&#xff0c;当我听说Apache软件基金会&#xff08;ASF&#xff09;正在考虑让OpenOffice项目“退休”时&#xff0c;内心的震动是实实在在的。对于我们这些经历过世纪之交软件大战的老兵来说&#xff0c;Open…...

【研报 A109】2026年脑机接口产业化专题报告:首个侵入式产品获批,医保完成赋码

摘要&#xff1a;脑机接口行业正迎来产业化应用的关键元年&#xff0c;2026年行业正式从实验室研究走向规模化商业化落地&#xff0c;当前行业处于导入期尾端、爆发前夜&#xff0c;非侵入式与半侵入式路径已率先打通商业化通道&#xff0c;侵入式则处于临床验证阶段。政策端&a…...

Cursor-Buddy:基于AI的Web界面语音交互与视觉引导助手

1. 项目概述与核心价值最近在捣鼓一个挺有意思的开源项目&#xff0c;叫cursor-buddy。简单来说&#xff0c;它是一个能“住”在你鼠标光标里的AI助手&#xff0c;专门为Web应用设计。想象一下&#xff0c;你在浏览一个复杂的后台管理系统或者一个数据看板&#xff0c;突然想找…...

从SMP到NUMA:聊聊多核CPU时代Linux内存管理是怎么‘进化’的

从SMP到NUMA&#xff1a;多核CPU时代的内存管理演进之路 2000年代初&#xff0c;当单核CPU的主频竞赛逐渐触及物理极限时&#xff0c;计算机架构师们面临一个关键抉择&#xff1a;如何在芯片上堆叠更多晶体管&#xff1f;答案最终指向了多核设计。但随之而来的内存访问瓶颈&…...

别再花钱买服务器了!手把手教你用Sakura Frp免费搞定内网穿透(Windows保姆级教程)

零成本实现内网穿透&#xff1a;Windows平台实战指南 在个人开发和小型项目测试阶段&#xff0c;许多开发者都面临一个共同难题——如何将本地服务暴露到公网供临时访问&#xff1f;传统解决方案往往需要租用云服务器&#xff0c;不仅成本高昂&#xff0c;配置过程也相当复杂。…...

【AI原生架构黄金法则】:SITS 2026现场实录的7条反直觉设计铁律(仅限首批参会专家内部流出)

AI原生应用架构设计&#xff1a;SITS 2026技术专家实战经验分享 更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;SITS 2026现场共识与AI原生架构范式跃迁 在SITS 2026全球智能系统技术峰会上&#xff0c;来自37个国家的架构师、AI平台工程师与标准化组…...

彻底告别Ubuntu 20.04休眠唤醒黑屏:除了降级驱动,你还可以这样一劳永逸地禁用挂起

彻底告别Ubuntu 20.04休眠唤醒黑屏&#xff1a;系统级电源管理优化指南 如果你正在使用Ubuntu 20.04并频繁遭遇休眠唤醒后的黑屏问题&#xff0c;这篇文章将为你提供一套完整的解决方案。不同于常见的驱动降级方案&#xff0c;我们将从系统配置层面入手&#xff0c;通过调整电源…...