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

el-datepicker此刻按钮点击失效

文章目录

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

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

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

相关文章:

  • Odoo 免费开源 ERP:通过 JavaScript 创建对话框窗口的技术实践分享
  • vscode插件更新特别慢的问题
  • VSCode 性能优化指南:提高编码效率,减少资源占用
  • 【Linux】查询磁盘空间被谁占用了
  • 面向未来的教育技术:智能成绩管理系统的开发
  • 图像处理-Ch6-彩色图像处理
  • 哈希——哈希表处理哈希冲突的方法
  • Python小游戏20——超级玛丽
  • 微信小程序 - 获取汉字拼音首字母(汉字英文首字母)根据汉字查拼音,实现汉字拼音首字母获取,在小程序上实现汉字的拼音提取首字母!
  • 什么是贪心算法
  • Apache POI—读写Office格式文件
  • HarmonyOS ArkTS Web组件jsbridge
  • Hadoop-002-部署并配置HDFS集群
  • Codeforces Round 981 (Div. 3) (A~F)
  • Java入门10——封装(private)
  • 【Linux】--- 开发工具篇:yum、vim、gcc、g++、gdb、make、makefile
  • 萤石私有化设备视频平台EasyCVR视频融合平台如何构建农业综合监控监管系统?
  • 面试题整理 4
  • 阿里云docker安装禅道记录
  • TCP三次握手,四次挥手,以及11种状态详解
  • Oracle 第17章:数据字典与视图
  • python的数据结构列表方法及扩展(栈和队列)
  • InstructIR: High-Quality Image Restoration Following Human Instructions 论文阅读笔记
  • IDEA 好用的插件分享
  • Blender进阶:贴图与UV
  • 【C++篇】跨越有限与无限的边界:STL之set容器中的自我秩序与无限可能