el-datepicker禁用未来日期(包含时分秒)type=‘datetime’

文章目录

    • 实现代码
      • 方式1:当选中日期的时候去更新一次。
      • 方式2: 优化版本,使用 setTimout 每分钟更新一次。(防止选中日期之后过了很久再去选择时分秒时没有根据当前时间去改变)

el-datepicker 选择器禁用未来日期,动态禁用 时分秒;
秒 这一列的选项没有禁用的样式 可以随便选,
但是 点击确定后时间会更新到限制的那个时间(选中日期的那一刻)。

禁用效果

实现代码

方式1:当选中日期的时候去更新一次。

<template>
  <div class="hello">
    <el-date-picker
      v-model="time"
      type="datetime"
      :picker-options="{
        disabledDate(time) {
          const nowTime = new Date()
          return new Date(time).getTime() > nowTime.getTime()
        },
        selectableRange
      }"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  data() {
    return {
      time: ''
    }
  },

  computed: {
  	// 限制时分秒选择范围
  	/*
  	* 当切换年月日的时候要动态去改变
  	* onPick 方法只能在 时间范围 选择器才能用;
  	* 但当修改选中日期的时候可以使用 watch / computed 监听到变动。
  	*/
    selectableRange() {
      const nowTime = new Date()
      const isSame = new Date(this.time).toLocaleDateString() === nowTime.toLocaleDateString()
      if (isSame) {
        return `00:00:00-${nowTime.getHours()}:${nowTime.getMinutes()}:${nowTime.getSeconds()}`
      }
      return '00:00:00-23:59:59'
    }
  }
}
</script>

方式2: 优化版本,使用 setTimout 每分钟更新一次。(防止选中日期之后过了很久再去选择时分秒时没有根据当前时间去改变)

<template>
  <div class="hello">
    <el-date-picker
      v-model="time"
      type="datetime"
      :picker-options="{
        disabledDate(time) {
          const nowTime = new Date()
          return new Date(time).getTime() > nowTime.getTime()
        },
        selectableRange
      }"
      @change="changeDate"
    ></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: {
    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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/901356.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

重生之“我打数据结构,真的假的?”--2.单链表(无习题)

C语言中的单链表总结 单链表是一种基础的数据结构&#xff0c;广泛应用于C语言编程中。它由节点组成&#xff0c;每个节点包含数据和指向下一个节点的指针。单链表的优点在于动态内存分配和高效的插入与删除操作。本文将详细探讨单链表的定义、基本操作、应用场景以及相关示例…

Gateway 统一网关

一、初识 Gateway 1. 为什么需要网关 我们所有的服务可以让任何请求访问&#xff0c;但有些业务不是对外公开的&#xff0c;这就需要用网关来统一替我们筛选请求&#xff0c;它就像是房间的一道门&#xff0c;想进入房间就必须经过门。而请求想要访问微服务&#xff0c;就必须…

ComfyUI系列——新手安装ComfyUI,就是这么简单

比较Midjoury、WebUI和ComfyUI 在了解ComfyUI的时候&#xff0c;还有其它两款类似的产品&#xff0c;于是就搜集了一下资料&#xff0c;以下是Midjoury、WebUI&#xff08;通常指的是Stable Diffusion Web UI&#xff09;和ComfyUI三者之间的异同点对比表。 特性MidjourneySt…

国内短剧系统源码搭建系统平台小程序新玩法

在数字化内容消费日益普及的今天&#xff0c;短剧小程序作为一种新兴的内容平台&#xff0c;其功能设计至关重要。一个好的短句系统不仅需要提供优质的内容展示&#xff0c;还需要具备一系列优秀功能以满足用户和运营者的需求。以下是一些必备的功能特点&#xff1a; 为大家介…

WebGL 添加背景图

1. 纹理坐标&#xff08;st坐标&#xff09;简介 ST纹理坐标&#xff08;也称为UV坐标&#xff09;是一种二维坐标系统&#xff0c;用于在三维模型的表面上精确地定位二维纹理图像。这种坐标系统通常将纹理的左下角映射到(0,0)&#xff0c;而右上角映射到(1,1)。 S坐标&#x…

leetcode_128:最长连续序列

给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解…

CSS揭秘:7. 伪随机背景

前置知识&#xff1a;CSS 渐变&#xff0c;5. 条纹背景&#xff0c;6. 复杂的背景图案 前言 本篇主要内容依然是关于背景的&#xff0c;无限平铺的背景会显得整齐美观&#xff0c;但又有些呆板&#xff0c;如何实现背景的多样性和随机性&#xff0c;是本篇的核心。 一、四种颜…

AI周报(10.20-10.26)

AI应用-牙科AI产品Pearl Pearl是一家致力于改善牙科患者护理的人工智能驱动型公司&#xff0c;推出了首款获得美国食品药品监督管理局&#xff08;FDA&#xff09;批准的人工智能&#xff0c;能够读取牙科X光片并即时识别疾病。今年7月获得5800万美元的B轮融资&#xff0c;以加…

GESP一级真题分析-202303-选择题1-输入输出设备、存储单位、默认数据类型、标识符命名

PDF文档回复:20241026 1 相关知识点 1) 输入输出设备 输入设备 是外界向计算机传送信息的装置。在微型计算机系统中&#xff0c;最常用的输入设备是键盘和鼠标。 此外还有电子光笔、数字化仪、图形扫描仪、触摸屏、麦克风、视频输入设备、条形码扫描等 输出设备 作用是将计…

Java-图书管理系统

我的个人主页 欢迎来到我的Java图书管理系统&#xff0c;接下来让我们一同探索如何书写图书管理系统吧&#xff01; 1管理端和用户端 2建立相关的三个包&#xff08;book、operation、user&#xff09; 3建立程序入口Main类 4程序运行 1.首先图书馆管理系统分为管理员端和…

6.stm32 OLED显示屏

调试方式 串口调试&#xff1a;通过串口通信&#xff0c;将调试信息发送到电脑端&#xff0c;电脑使用串口助手显示调试信息 显示屏调试&#xff1a;直接将显示屏连接到单片机&#xff0c;将调试信息打印在显示屏上 Keil调试模式&#xff1a;借助Keil软件的调试模式&#…

【阅读笔记】Instruction-based Hypergraph Pretraining

Abstract中可以提炼的信息&#xff1a; 背景&#xff1a;预训练的作用是为了增强图学习模型将知识从大数据集转移到下游任务的适应性。 想解决的问题&#xff1a;训练目标的不同与数据分布的不同会阻碍预训练知识的迁移。 文章受到基于指令的提示词在语言模型训练广泛应用的启发…

Vue学习笔记(四)

事件处理 我们可以使用 v-on 指令 (通常缩写为 符号) 来监听 DOM 事件&#xff0c;并在触发事件时执行一些 JavaScript。用法为 v-on:click"methodName" 或使用快捷方式 click"methodName" 事件处理器的值可以是&#xff1a; 内联事件处理器&#xff1…

鹅厂面试官:Transformer 为何需要位置编码?

最近这一两周看到不少互联网公司都已经开始秋招发放Offer。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些球…

前端零基础入门到上班:【Day2】开发环境VSCode安装

VSCode 安装教程&#xff1a;图文保姆教程 引言 在前端开发中&#xff0c;选择合适的代码编辑器是提高工作效率的重要一步。Visual Studio Code&#xff08;简称 VSCode&#xff09;作为一款强大的开源编辑器&#xff0c;因其简洁易用、功能强大、扩展性好而广受开发者喜爱。…

【智能大数据分析 | 实验四】Spark实验:Spark Streaming

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…

Postman常见问题及解决方(全)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、网络连接问题 如果Postman无法发送请求或接收响应&#xff0c;可以尝试以下操作&#xff1a; 检查网络连接是否正常&#xff0c;包括检查网络设置、代理设置…

前端零基础入门到上班:【Day3】从零开始构建网页骨架HTML

HTML 基础入门&#xff1a;从零开始构建网页骨架 目录 1. 什么是 HTML&#xff1f;HTML 的核心作用 2. HTML 基本结构2.1 DOCTYPE 声明2.2 <html> 标签2.3 <head> 标签2.4 <body> 标签 3. HTML 常用标签详解3.1 标题标签3.2 段落和文本标签3.3 链接标签3.4 图…

市面上热门的四款PDF转换器解析!!

在互联网普及的今天&#xff0c;PDF和Excel已经成为我们工作中不可或缺的两种文件格式。PDF常用于文档的阅读、打印和分享&#xff0c;而Excel则适用于数据的分析和处理。但是&#xff0c;有时候我们需要在两者之间进行转换&#xff0c;例如将PDF中的数据导入到Excel中进行进一…

物联网数据采集网关详细介绍-天拓四方

一、物联网数据采集网关的概述 物联网数据采集网关&#xff0c;简称数据采集网关&#xff0c;是物联网系统中的重要组成部分&#xff0c;位于物联网设备和云端平台之间。其主要职责是实现数据的采集、汇聚、转换、传输等功能&#xff0c;确保来自不同物联网设备的数据能够统一…