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

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

【系统架构设计师-2025上半年真题】综合知识-参考答案及部分详解(回忆版)

更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20~21题】【第…...