当前位置: 首页 > 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_…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...