el-datepicker此刻按钮点击失效

news/2024/10/30 22:41:54/

文章目录

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

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

尝试将禁用日期延后几分钟,这样确实可用。如果禁用未来日期的同时,你又限制了时分秒(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>javascript">
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>

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

在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/news/1543204.html

相关文章

测试华为GaussDB(DWS)数仓,并通过APISQL快速将(表、视图、存储过程)发布为API

华为数据仓库服务 数据仓库服务&#xff08;Data Warehouse Service&#xff0c;简称DWS&#xff09;是一种基于公有云基础架构和平台的在线数据处理数据库&#xff0c;提供即开即用、可扩展且完全托管的分析型数据库服务。DWS是基于华为融合数据仓库GaussDB产品的云原生服务&a…

闲一品交易平台:SpringBoot技术的力量

第3章 系统分析 3.1 需求分析 闲一品交易平台主要是为了提高工作人员的工作效率和更方便快捷的满足用户&#xff0c;更好存储所有数据信息及快速方便的检索功能&#xff0c;对系统的各个模块是通过许多今天的发达系统做出合理的分析来确定考虑用户的可操作性&#xff0c;遵循开…

MySQL覆盖索引

覆盖索引&#xff08;Covering Index&#xff09;是数据库优化中的一种重要技术 覆盖索引是指一个查询语句在执行时&#xff0c;所需的数据可以完全通过索引来获取&#xff0c;而无需访问实际的数据行。也就是说&#xff0c;查询语句所需的列都包含在了创建的索引中&#xff0c…

WebGIS开发丨从入门到进阶,全系列课程分享

WebGIS开发所需的技能 1.前端技能&#xff1a;Html、CSS、 Javascript、WebAPLs、Vue 2.二维技能&#xff1a;WebGIS基础理论及开发、MapGIS二次开发Openlayers、Leaflet、Mapbox 、Echarts、公共开发平台开发等 3.三维技能&#xff1a;Blender、Three.js、Cesium等 Web开发…

【libGL error】Autodl云服务器配置ACT的conda虚拟环境生成训练数据时,遇到了libGL相关错误,涉及swrast_dri.so

问题与解决方案 1. libGL error: MESA-LOADER: failed to open iris conda install -c conda-forge libstdcxx-ng来源suffix _dri 下面的问题是在Autodl云服务器上运行程序是出现的&#xff0c;在Ubuntu笔记本上安装的Anaconda没有出现以下问题。 Autodl云服务器安装的是Mi…

代码随想录-字符串-替换数字

题目与解析 考察的小技巧有点多&#xff0c;整体思路除了双指针之外&#xff0c;其他的都有点僵硬&#xff0c;不能算是太有共性的题型 代码解析 import java.util.Scanner; public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System…

什么是栈溢出

一、什么是栈溢出 栈溢出&#xff08;Stack Overflow&#xff09;就是指在程序运行过程中&#xff0c;往栈里存放的数据超过了栈所能容纳的最大容量&#xff0c;从而导致程序出现异常行为的情况。这就好比一个箱子本来只能装一定数量的物品&#xff0c;硬要往里面塞更多的东西&…

Unity(四十八):Unity与Web双向交互

效果 游戏对象绑定脚本 游戏脚本源码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class Tent : MonoBehaviour {public Camera camera;// Start is called before the first frame updatevoid Start(){}// Update is called once…