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

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

在这里插入图片描述

在这里插入图片描述


http://www.mrgr.cn/news/62193.html

相关文章:

  • 什么是多态?面向对象中对多态的理解
  • python 基础语法 学习
  • SSGNN: SIMPLE YET EFFECTIVE SPECTRAL GRAPH NEURAL NETWORK
  • 线性代数(1)——线性方程组的几何意义
  • .NET 8 中的 Mini WebApi
  • c++ libtorch Eigen矩阵转换为torch张量时数据类型必须一致
  • ts:常见的内置数学方法(Math)
  • 面向对象编程——重写和多态
  • UART-通用异步收发器
  • 推荐使用 CompletableFuture 框架进行异步操作,很强很方便
  • 从一到无穷大 #38:讨论 “Bazel 集成仅使用 Cmake 的依赖项目” 通用方法
  • 智航船舶租赁综合管理系统
  • 【C++刷题】力扣-#575-分糖果
  • python的lambda实用技巧
  • 深度学习之激活函数
  • 避免关键任务延迟的资源分配方法
  • Golang高级语法-工具链
  • 拓展学习-golang的基础语法和常用开发工具
  • 博科交换机SNMP采集(光衰)信息
  • 【FinalShell问题】FinalShell连接虚拟机超时问题
  • 「Mac畅玩鸿蒙与硬件14」鸿蒙UI组件篇4 - Toggle 和 Checkbox 组件
  • RegCM模式运行./bin/regcmMPI报错
  • 函数声明不是原型error: function declaration isn’t a prototype
  • 爆肝整理14天AI工具宝藏合集(三)
  • Node.js:模块 包
  • 前端文件上传组件流程的封装