Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解

网上很多都是不完整的,我这里发布一个完整的

- 8.64e7 表示可选择当天时间(注:小于当前时间,- 8.64e7 则是禁用日期不包含当前日,若大于当前日期, 8.64e7 则是禁用日期包含当前日)

time.getTime() < Date.now() - 8.64e7  禁用日期不包含当前日

time.getTime() > Date.now() - 8.64e7  禁用日期包含当前日

1.只能选择当日

<el-date-pickerformat="yyyy 年 MM 月 dd 日"value-format="yyyy-MM-dd"v-model="ruleForm.shenqingshijian"type="date":picker-options="pickerOptions"placeholder="申请时间">
</el-date-picker><script>
export default {data() {return {selectedDate: null,pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() || (time.getTime() < Date.now() - 8.64e7); }, },};},
};
</script>


2.限制只能选择当天之前的日期                        

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},},};},
};
</script>

3.限制只能选择当天之后的日期

<template><div><el-date-pickerv-model="selectedDate":picker-options="pickerOptions"></el-date-picker></div>
</template><script>
export default {data() {return {selectedDate: null,pickerOptions: {disabledDate(time) {return time.getTime() < Date.now();},},};},
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++ 读写锁的理解

1.概要 读写锁的理解 读的时候&#xff0c;只要是读的线程都不受限制&#xff0c;但不能写。 写的时候&#xff0c;线程独占&#xff0c;任何写和读的线程都不可以。 最初我以为&#xff0c;只有限制写就可以了&#xff0c;读完全不受现在&#xff0c;但是有可能读到不完整的…

【初始类和对象】(实例讲解!超级详细!)

【初始类和对象】 前言1. 面向对象的初步认知1.1什么是面向对象1.2 面向对象与面向过程 2. 类的定义和使用2.1 简单认识类2.2 类的定义格式 3. 知识的代码举例讲解3.1 创建类、实例化类3.2 构造方法初始化类、this 3. 总结 前言 由于类和对象是我们在学习过程中需要接受的概念…

AI赋能未来教育:中国教学科研新蓝图

设“人啊 前言 回顾过去&#xff0c;传统的教育模式以知识灌输和应试为主&#xff0c;虽培养出大量人才&#xff0c;但也存在着学生创新能力不足、实践经验缺乏等问题。随着时代的进步和科技的发展&#xff0c;传统教育模式已难以满足当今社会对人才的需求。然而&#xff0c;当…

LoadIncrementalHFiles 流程和原理

目录 1. HBase Bulk Load 简介 2. 流程 3. 原理 4. 使用注意事项 5.补充说明之"什么是移动文件" 1. HBase Bulk Load 简介 LoadIncrementalHFiles是用于HBase的Bulk Load工具&#xff0c;允许用户高效地将大量数据直接加载到HBase表中&#xff0c;而不是使用传…

中国现代十大杰出人物颜廷利:好的司机不如好的同机

找好‘同机’者, 要比找好‘司机’者, 原因就是, ‘司机’虽好, 但不是‘同路人’, 再多努力的攀附都是徒劳, 至于‘同机’者, 即便是对方在自己的眼里心中都一无是处, 只不过, 他/她才是您旅途之中, 真真正正、风雨同舟的人…(升命学说) 21世纪东方哲学家思想家、科学家、当代…

孩子学编程和不学编程的差距?

随着信息技术的飞速发展&#xff0c;编程已经成为一项非常重要的技能&#xff0c;不仅仅是在计算机领域&#xff0c;而且在各个行业都有着广泛的应用。因此&#xff0c;让孩子学习编程已经成为很多家长的选择。那么&#xff0c;孩子学习编程和不学习编程之间有哪些差距呢&#…

TODESK远控快捷键在哪里

在当今高度数字化的世界中&#xff0c;远程工作和协作已经成为日常生活和业务运营的重要组成部分。Todesk作为一款出色的远程协作软件&#xff0c;为用户提供了诸多功能&#xff0c;以确保流畅、高效的远程连接体验。其中&#xff0c;快捷键功能极大地提升了用户的操作便捷性。…

高速、简单、安全的以太彩光,锐捷网络发布极简以太全光 3.X 方案

从 2021 年 3 月正式推出到现在&#xff0c;锐捷网络极简以太全光方案已经走进第四个年头。IT 仍在不断向前发展&#xff0c;数字化进程深入&#xff0c;数字化业务增多&#xff0c;更广泛的终端设备接入企业级园区网络&#xff0c;对园区网络提出了更高的要求&#xff0c;例如…

GDB断点执行的次数

需求背景&#xff1a;条件断点可能执行多次&#xff0c;但是可能在最后一次执行引发了后续的问题&#xff0c;但是断点位置并非问题现场&#xff0c;如何使得断点在最后一次停下来&#xff1f; 方法&#xff1a; 1.首先设置条件断点 (gdb) b (gdb) cond breakpoint_number…

Linux NFS共享目录配置漏洞

Linux NFS共享目录配置漏洞 一、实验目的二、实验原理三、复现准备四、漏洞复现4.1、复现前提4.2、正式复现 一、实验目的 利用 NFS共享目录配置漏洞读取目标主机的 /etc/passwd 文件内容NFS 服务配置漏洞&#xff0c;赋予了根目录远程可写权限&#xff0c;导致 /root/.ssh/au…

关系型数据库VS非关系型数据库

数据库是存储和组织数据的系统&#xff0c;主要分为两大类&#xff1a; 关系型数据库&#xff08;Relational Database Management Systems, RDBMS&#xff09; 非关系型数据库&#xff08;NoSQL Databases&#xff09; 下面分别介绍这些类型及其区别&#xff1a; 关系型数…

im8mm 网络卡死 Rx packets:1037578 errors:66 dropped:0 overruns:66 frame:0

1&#xff1a;网络接收数据包异常 2&#xff1a;问题复现 问题在进行网络数据包同吞吐量测试的时候出现的。同时发现&#xff0c;在使用iperf2测试时&#xff0c;是不会出现网络中断卡死的情况&#xff0c;使用 iperf3时才会出现此问题 指令(下面的指令运行在PC2上面&#xff…

AGV混合型电机驱动器|伺服控制器CNS-MI50H系列对电机的要求

混合型电机驱动器 CNS-MI50H系列涵盖CNS-MI50HB-A、CNS-MI50HBN-A、CNS-MI50HDN-A、CNS-MI50HSN-A型号&#xff0c;专为 AGV 舵轮控制需求设计&#xff0c;集成舵轮转向角度控制和驱动电机闭环控制。支持增量式编码器&#xff0c;霍尔传感器&#xff0c; 角度电位计&#xff0c…

自动化测试基础 --- Jmeter

前置环境安装 首先我们需要知道如何下载Jmeter 这里贴上下载网站Apache JMeter - Download Apache JMeter 我们直接解压,然后在bin目录下找到jemter.bat即可启动使用 成功打开之后就是这个界面 每次打开可以用这种方式切换成简体中文 或者直接修改properties文件修改对应的语言…

目标检测算法YOLOv8简介

YOLOv8论文尚未发布&#xff0c;YOLOv8由Ultralytics公司推出并维护&#xff0c;源码见&#xff1a;https://github.com/ultralytics/ultralytics &#xff0c;于2024年1月发布v8.1.0版本&#xff0c;最新发布版本为v8.2.0&#xff0c;License为AGPL-3.0。 以下内容主要来自&am…

FFmpeg 中 -f 命令参数详解

FFmpeg FFmpeg是一个开源的、功能强大的多媒体框架,它能够处理几乎所有格式的音频和视频文件。FFmpeg由Fabrice Bellard创立,并由Michael Niedermayer等人继续开发。它包括了libavcodec(用于编解码)、libavformat(用于格式转换)、libavfilter(用于音视频过滤)、libavd…

微信授权登录01-PC端

目录 ## 前言 1.准备工作 1.1 网站域名 1.2 微信开放平台 2.授权授权登录开发 2.1 前端开发 2.1.1 发起授权登录跳转至扫码页面 2.1.2 扫码成功后回调处理 2.2 后端开发 2.2.1 根据code查询用户信息 2.2.2 自动注册登录 ## 后记 ## 前言 最近整了个AI助手网站&am…

React 学习-5

React 条件渲染: 与js中的写法一致 注意&#xff1a;在 JavaScript 中&#xff0c;true && expression 总是返回 expression&#xff0c;而 false && expression 总是返回 false。 因此&#xff0c;如果条件是 true&#xff0c;&& 右侧的元素就会被渲…

BL120协议Modbus RTU和Modbus TCP互转

Modbus网关BL120是一款专注于Modbus协议之间相互转换的通信设备。Modbus网关BL120支持多种下行采集协议&#xff0c;包括Modbus RTU和Modbus TCP&#xff0c;同时在上行转发协议方面同样支持Modbus RTU和Modbus TCP。Modbus网关为Modbus RTU和Modbus TCP协议的相互转换提供了稳…

回炉重造java----单列集合(List,Set)

体系结构: 集合主要分为两种&#xff0c;单列集合collection和双列集合Map&#xff0c;区别在于单列集合一次插入一条数据&#xff0c;而双列的一次插入类似于key-value的形式 单列集合collection 注:红色的表示是接口&#xff0c;蓝色的是实现类 ①操作功能: 增加: add()&am…