el-date-picker picker-options属性中disabledDate设置时间的禁用和启用,并且支持到时分秒的禁用和启用

news/2024/11/14 12:10:37/
  • 默认picker-options 是配置的对象,如果代码中只存在一个开始时间或者一个结束时间,可以直接设置成对象进行配置
  • 我这里的应用场景是在表格中存在多个时间的配置项
    • 使用到了dayjs作为时间判断,也可以自行根据js来实现判断
    • 需要将picker-options 做成函数,应为表格每一行中都存在一个开始和结束时间,需要把每一行的开始和结束时间传递过去进行判断
    • 所以可以将picker-options当作函数,参数传递为对应需要进行处理开始和结束时间,返回值 picker-options 配置的参数
    • selectableRAnge 可以支持到时分秒的判断,例如结束时间的配置,需要拿到开始时间的时分秒,设置为自己时间可选范围的区间
  • 以下是代码部分
    • javascript">data() {return {// 结束时间的禁用endPickerOptions: function (item) {return {disabledDate: function (time) {if(!item.startTime) return false// 比较是否为同一天,如果组件中需要选择时分秒,则会出现开始时间和结束时间同一天无法选择的问题,需要加上判断,不需要时分秒可以去掉这行,开始和结束判断一样if(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) {return false}return time.getTime() < item.startTime},selectableRange: (() => {if(!item.startTime) return [`00:00:00 - 23:59:59`]if(item.startTime) {let date = new Date(item.startTime);let hour = date.getHours();let minute = date.getMinutes();let second = date.getSeconds();// 大于一天的话,时分秒可以随意选择if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`]return [`${hour}:${minute}:${second} - 23:59:59`]}})()}},// 开始时间的禁用startPickerOptions(item) {return {disabledDate: function (time) {if(!item.endTime) return falseif(item.startTime && item.endTime && dayjs(item.startTime).format('YYYY-MM-DD') === dayjs(item.endTime).format('YYYY-MM-DD')) {return false}return time.getTime() > item.endTime},selectableRange: (() => {if(!item.endTime) return [`00:00:00 - 23:59:59`]if(item.endTime) {let date = new Date(item.endTime);let hour = date.getHours();let minute = date.getMinutes();let second = date.getSeconds();// 大于一天的话,时分秒可以随意选择if(item.endTime - item.startTime > 3600 * 24) return [`00:00:00 - 23:59:59`]return [`00:00:00 - ${hour}:${minute}:${second}`]}})()}},}},


http://www.ppmy.cn/news/1546605.html

相关文章

2024.11.7- Redis的主从复制集群

7.1 Redis的主从复制 7.1.1 简介 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(master)&#xff0c;后者称为从节点(slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到从节点。 ​ 默认情况下&#…

kafka常见面试题总结

Kafka 核心知识解析 一、Kafka 消息发送流程 Kafka 发送消息涉及两个线程&#xff1a;main 线程和 sender 线程。在 main 线程中&#xff0c;会创建一个双端队列 RecordAccumulator&#xff0c;main 线程负责将消息发送给 RecordAccumulator&#xff0c;而 sender 线程则从 R…

【HAProxy05】企业级反向代理HAProxy调度算法之静态算法与动态算法

HAProxy 调度算法 HAProxy通过固定参数 balance 指明对后端服务器的调度算法&#xff0c;该参数可以配置在listen或backend选 项中。 HAProxy的调度算法分为静态和动态调度算法&#xff0c;但是有些算法可以根据不同的参数实现静态和动态算法 相互转换。 官方文档&#xff1…

实现高效数据同步:从金蝶云星空到旺店通

盘亏单对接其他出库单&#xff1a;金蝶云星空到旺店通企业奇门的数据集成方案 在现代企业的运营过程中&#xff0c;数据的高效流动和准确对接是确保业务顺畅运行的关键。本文将分享一个具体的技术案例&#xff0c;展示如何通过轻易云数据集成平台&#xff0c;将金蝶云星空中的…

使用 Python 实现高效网页爬虫——从获取链接到数据保存

前言 在这个时代,网络爬虫已成为数据分析与信息收集不可或缺的技术之一。本文将通过一个具体的Python项目来介绍如何构建一个简单的网络爬虫,它能够自动抓取指定网站的文章链接、标题、正文内容以及图片链接,并将这些信息保存为CSV文件。 目标网站 一、准备工作 在开始编…

1.1 关于游戏编程

1.1.1、游戏中客户端和服务器的交互 游戏通常采用客户端-服务器模式‌。在这种模式下&#xff0c;服务器负责处理游戏的核心逻辑、数据存储和玩家间的交互&#xff0c;而客户端则负责呈现游戏画面、接收玩家输入并与服务器通信‌。 客户端和服务器的作用和功能 ‌客户端‌&a…

DevExpress JS ASP.NET Core v24.1亮点 - 支持DateOnly/TimeOnly类型

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合&#xff0c;使您可以利用现代Web开发堆栈&#xff08;包括React&#xff0c;Angular&#xff0c;ASP.NET Core&#xff0c;jQuery&#xff0c;Knockout等&#xff09;构建交互式的Web应用程序。从Angular和Reac&#xff0c…

mapreduce 将数据清洗后保存到 hbase

mapreduce 将数据清洗后保存到 hbase 数据格式 {"年份":"1990","国家补贴&#xff08;亿元&#xff09;":"5.4","地方补贴&#xff08;亿元&#xff09;":"3.2","企业补贴&#xff08;亿元&#xff09;&qu…