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

el-date-picker限制只能选择当前时间前/后的时间(包含日期、时、分)

限制只能选择当前时间前/后的时间(包含日期、时、分)

  1. 首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。
<el-date-pickerv-model="saveForm.startTime":picker-options="pickerOptions"format="yyyy-MM-dd HH:mm"value-format="timestamp"type="datetime"placeholder="选择开始时间"style="width: 47%"default-time="9:00:00"
/>
  1. disabledDate用于禁用当前日期前的所有日期,有的小伙伴可能会疑问,为什么要“-8.64e7”,是因为单纯使用time.getTime() < Date.now() 这段代码的效果是会使当前日期也会被禁用掉,这时候就需要在当前日期的基础上减掉一天,表示可以选择当天。
    限制完日期后,可能还会需要限制时间的选择,这里我们使用selectableRange对时间进行限制,获取当前时间,然后做一个时间的拼接即可。限制只能选择当前时间前的代码如下,稍微变动一下:

data(){return:{pickerOptions: {disabledDate: time => {return time.getTime() < Date.now() - 8.64e7},selectableRange: new Date().getHours() + ':' + (new Date().getMinutes() + 1) + ':00' + ' - 23:59:59'}}
}

3 ,以上代码只是限制了当天的的时间的选择,还没有完成。我们需要在合适的时间对我们的时间选择框进行放开和限制。比如限制只能选择当前时间前的时间,那么前一天的时间是00:00:00-23:59:59的时间都可以选择,而今天则不能放开全选。参考以下代码:


watch:{// 开始时间'saveForm.startTime'(selectTime){const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today = new Date(new Date().setHours(0,0,0,0)).getTime()if (date <= today){// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange =  new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'}else {// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'}},// 结束时间'saveForm.endTime'(selectTime){const date = new Date(new Date(selectTime).setHours(0,0,0,0)).getTime()const today = new Date(new Date().setHours(0,0,0,0)).getTime()if (date <= today){// 当选择的日期就是当天的时候,这个时候就要限制时间应当大于此时此刻的时分秒this.pickerOptions.selectableRange =  new Date().getHours() + ':'+(new Date().getMinutes()+1)+':00' + '- 23:59:59'}else {// 当选择的日期大于当天的时候,这时需要把时分秒的限制放开,否则不能选择this.pickerOptions.selectableRange = '00:00:00 - 23:59:59'}}

相关文章:

el-date-picker限制只能选择当前时间前/后的时间(包含日期、时、分)

限制只能选择当前时间前/后的时间&#xff08;包含日期、时、分&#xff09; 首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。 <el-date-pickerv-model"saveForm.startTime":picker-options"pickerOptions"format…...

MySQL 5.7 重置root用户密码

MySQL 5.7 重置root用户密码 如果你忘记了 MySQL 5.7 的 root 用户密码&#xff0c;可以按照以下步骤来重置密码&#xff1a; 1、停止 MySQL 服务。 # systemctl stop mysql.service 2、进入MySQL服务的安全启动模式 # mysqld_safe --skip-grant-tables &3、连接到 MyS…...

分布式数据库Polardb-X架构及特点

PolarDB-X架构 计算节点&#xff08;Compute Node&#xff0c;CN&#xff09;是系统的入口&#xff0c;采用无状态设计的sql引擎提供分布式路由和计算&#xff0c;包括SQL解析器、优化器、执行器等模块。负责数据分布式路由、计算及动态调度&#xff0c;负责分布式事务2PC协调…...

【spring】@Resource注解学习

Resource介绍 在Spring框架中&#xff0c;Resource 注解是一个JSR-250标准注解&#xff0c;用于自动装配&#xff08;autowiring&#xff09;Spring容器中的bean。Resource 注解可以用于字段、方法和方法参数上&#xff0c;以声明依赖注入。 Resource源码 Target({TYPE, FIE…...

【leetcode面试经典150题】43. 字母异位词分组(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…...

计算机网络 Cisco路由器基本配置

一、实验内容 1、按照下表配置好PC机IP地址和路由器端口IP地址 2、配置好路由器特权密文密码“abcd&#xff0b;两位班内序号”和远程登录密码“star” 3、验证测试 a.验证各个接口的IP地址是否正确配置和开启 b.PC1 和 PC2 互ping c.验证PC1通过远程登陆到路由器上&#…...

Windows Edge 兼容性问题修复:提升用户体验的关键步骤

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

Vue 3 性能飞跃:解析其性能提升的关键方面

文章目录 响应式系统优化静态树提升diff算法优化Tree Shaking优化Composition API事件缓存机制 响应式系统优化 Vue双向绑定原理 Proxy 相较于 Object.defineProperty 在性能上的优势主要体现在以下几个方面&#xff1a; 属性检测的全面覆盖&#xff1a; Object.defineProper…...

MySQL 存储过程中,参数的传递主要通过以下两种方式:IN、OUT 和 INOUT

在 MySQL 存储过程中&#xff0c;参数的传递主要通过以下两种方式&#xff1a;IN、OUT 和 INOUT。这些参数类型决定了参数在存储过程中的使用方式以及存储过程执行完毕后参数值的变化。 1. IN 参数 IN 参数是输入参数&#xff0c;它的值在存储过程被调用时传入&#xff0c;并…...

修改当前Git仓库的地址、用户名、密码

1.修改仓库地址 git remote set-url origin 新的仓库地址2.修改用户名和密码 2.1 修改用户名和密码1 分两步操作&#xff1a; 修改用户名&#xff1a; git config --global user.name "Your New Name"修改密码&#xff1a; 如果是 HTTPS 访问方式&#xff0c;并…...

尚鼎环境科技诚邀您参观2024第13届生物发酵展

参展企业介绍 尚鼎环境科技(江苏)有限公司设立于2010年&#xff0c;公司坐落于江南平原南端素有『苏北门户』之称的古城扬州&#xff0c;办公室位在江苏省扬州市邗江区高新技术创业服务中心。 尚鼎环境科技长年致力于食品精炼/环境工程领域全程技术服务&#xff0c;工程实绩遍…...

UE5 C++ 创建3DWidgete 血条 再造成伤害

一&#xff0e;创建 二&#xff0e;&#xff35;&#xff29;里声明变量 创建类 public:UPROPERTY(EditAnywhere,BlueprintReadWrite,Category "MyWidget")float CurrentHealth 100.0f;UPROPERTY(EditAnywhere,BlueprintReadWrite,Category "MyWidget"…...

Android 14 vold 分析(1)启动

1.启动 它是从rc文件中启动的&#xff0c;rc文件是second stage init才会解析的&#xff0c;也就是说vold主要作用做second stage mount&#xff0c;那first stage mount是怎么做的呢&#xff0c;第一阶段实际上直接调用的是fs_mgr进行的mount&#xff0c;fs_mgr_do_mount_one…...

【云计算】混合云组成、应用场景、风险挑战

混合云组成及应用场景 1.混合云组成1.1 基础网络1.2 统一的技术平台 2.混合云应用场景2.1 灾备2.2 弹性算力调度2.3 法律合规2.4 成本控制 3.风险与挑战3.1 标准缺乏3.2 网速有限3.3 技术绑定3.4 法律合规 1.混合云组成 根据混合云应用场景的不同&#xff0c;混合云的组件差别…...

spring bean的继承和依赖

bean的继承和依赖 spring除了提供了一般的配置bean的方式之外&#xff0c;还实现了java中继承的特性&#xff0c;设置bean的父子关系&#xff0c;这样对于一些重复的配置就可以进行省略 bean的继承 配置bean的父子关系&#xff0c;父bean有的东西&#xff0c;子bean全部继承过来…...

Swift中的字符串

Swift中的字符串是一个有序的字符集合&#xff0c;用于存储和操作文本数据。字符串由一系列的Unicode字符组成&#xff0c;可以包含任意的字符&#xff0c;包括字母、数字、符号和空格等。 在Swift中&#xff0c;字符串的类型是String&#xff0c;可以使用双引号或者三引号来表…...

MySQL基础-----约束详解

目录 一. 概述: 二.约束演示&#xff1a; 三.外键约束&#xff1a; 3.1介绍&#xff1a; 3.2外键约束语法&#xff1a; 3.3删除&#xff0c;更新行为&#xff1a; 一. 概述: &#x1f9d0;&#x1f9d0;概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制…...

【Unity】游戏场景添加后处理特效PostProcessing

添加后处理特效PostProcessing 添加雾效果后处理何为后处理&#xff1f;添加后处理特效 添加雾效果 依次点击Window -> Rendering -> Lighting添加Lighting面板。 点击Lighting里面的Environment&#xff0c;找到Other Setting 将Fog选项勾选 更改下方的颜色 调整雾的浓…...

STM32芯片软复位导致SRAM2的值被擦除话题

1. 问题描述 客户在使用 STM32L433CCY6 开发过程中&#xff0c;出现软件复位后 SRAM2 里的值被擦除问题。 2. 问题确认 客户用同一版软件在两块板子上的表现还不一样&#xff0c;一块软件复位后 SRAM2 的值不会被擦除&#xff0c;另一块则会被擦除&#xff0c;并且确认被擦除…...

【C++航海王:追寻罗杰的编程之路】异常——错误处理方式之一

目录 引言 1 -> C语言传统的处理错误的方式 2 -> C异常概念 3 -> 异常的使用 3.1 -> 异常的抛出和捕获 3.2 -> 异常的重新抛出 3.3 -> 异常规范 4 -> 自定义异常体系 5 -> C标准库的异常体系 6 -> 异常的优缺点 引言 在C编程中&#xff…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...