日期时间选择(设置禁用状态)
目录
1.element文档需要
2.禁用所有过去的时间
3.设置指定日期的禁用时间
<template><div class="block"><span class="demonstration">起始日期时刻为 12:00:00</span><el-date-pickerv-model="value1"type="datetimerange"start-placeholder="开始日期"end-placeholder="结束日期":default-time="['12:00:00']"></el-date-picker></div>
</template><script>export default {data() {return {value1: ''};}};
</script>
1.element文档需要
Element - The world's most popular Vue UI framework
picker-options


<template><div class="block"><span class="demonstration">起始日期时刻为 12:00:00</span><el-date-pickerv-model="value1"type="datetimerange"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {value1: ''};},};
</script>
:picker-options="pickerOptions"
2.禁用所有过去的时间
computed:{pickerOptions(){return {disabledDate:this.disabledDate()}}},
methods:{disabledDate(time){console.log(time)return time<Date.now()}
}
disabledDate 是一个函数,用于判断某个日期是否应该被禁用。这个函数会在日期选择器中每个日期渲染时被调用,传入当前日期的 timestamp(时间戳),返回一个布尔值,表示该日期是否被禁用。
Date.now() 返回当前时间的时间戳(即从1970年1月1日00:00:00 UTC开始经过的毫秒数)
time<Date.now() 表示如果传入的 time (选中的日期时间戳)小于当前时间的时间戳,则会返回 true,表示该日期应该被禁用
换句话说,这个逻辑会禁用所有过去的时间

3.设置指定日期的禁用时间
假如现在有个指定日期选择器
<template><div class="block"><span class="demonstration">默认</span><el-date-pickerv-model="time"type="date"value-format="timestamp"placeholder="选择日期"></el-date-picker></div>
</template><script>export default {data() {return {time: '',};}};
</script>
此时data中的time就是需要的指定日期
value-format="timestamp"返回时间戳
computed:{pickerOptions(){return {disabledDate:this.disabledDate()}}},
disabledDate(time) {let allowedDate = new Date(this.time);console.log('allowedDate',allowedDate); let startOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate());let endOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate() + 1);return time.getTime() < startOfDay.getTime() || time.getTime() >= endOfDay.getTime();},
打印结果;
完整代码:
<template><div class="block"><el-date-pickerv-model="time"type="date"value-format="timestamp"placeholder="选择日期"></el-date-picker>//设置禁用时间<el-date-pickerv-model="value1"type="datetimerange"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {computed:{pickerOptions(){return {disabledDate:this.disabledDate()}}},data() {return {value1: '',time:'',};},methods:{disabledDate(time) {let allowedDate = new Date(this.time); let startOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate());let endOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate() + 1);return time.getTime() < startOfDay.getTime() || time.getTime() >= endOfDay.getTime();},}};
</script>
展示

相关文章:
日期时间选择(设置禁用状态)
目录 1.element文档需要 2.禁用所有过去的时间 3.设置指定日期的禁用时间 <template><div class"block"><span class"demonstration">起始日期时刻为 12:00:00</span><el-date-pickerv-model"value1"type"dat…...
基于SpringBoot的题库管理系统的设计与实现(源码+SQL+LW+部署讲解)
文章目录 摘 要1. 第1章 选题背景及研究意义1.1 选题背景1.2 研究意义1.3 论文结构安排 2. 第2章 相关开发技术2.1 前端技术2.2 后端技术2.3 数据库技术 3. 第3章 可行性及需求分析3.1 可行性分析3.2 系统需求分析 4. 第4章 系统概要设计4.1 系统功能模块设计4.2 数据库设计 5.…...
钉钉h5微应用安卓报错error29 ios报错error3 加上报错52013,签名校验失败 (前端)
这两个都是应为 免登报错52013,签名校验失败 用户后端签名使用的url地址和前端访问地址需要严格一致,包括端口号。前端部分可以用alert显示出当前的location.href,后端部分请在签名的时候打印日志。 访问通过反向代理服务器、各种NAT等场景下…...
Vue.js组件开发-客户端如何限制刷新Token次数
在Vue.js组件开发中,限制刷新Token的次数是一个重要的安全措施,可以防止恶意用户或攻击者无限次尝试刷新Token。 客户端限制 在客户端,可以通过Vuex、localStorage或sessionStorage等存储机制来跟踪刷新Token的尝试次数。以下是一个基本的实…...
Linux上安装jdk
在线环境的话,通过命令下载,离线环境的话,组要自行去oracle官网下载后上传 wget --no-check-certificate --no-cookies --header "Cookie: oraclelicenseaccept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jd…...
Ardunio BLE keyboard 库的使用
为了开发一个 ardunio 的蓝牙选歌器,网络上普遍推荐使用: https://github.com/T-vK/ESP32-BLE-Keyboard 结果搞了好几天,就是不行。最后发现,下面两点非常重要: 使用 NimBle-ardunio 库这个库目前是2.1.2 ÿ…...
django --递归查询评论
表数据 树状结构 action(methods(GET, ), detailFalse) def get_info_pinglun(self, request, *args, **kwargs) -> Response:根据评论id查所有回复params wenxian_pinglun_id --> 评论id;wenxian_pinglun_id self.request.GET.get(wenxian_pinglun_id)results se…...
【开源免费】基于SpringBoot+Vue.JS音乐网站(JAVA毕业设计)
本文项目编号 T 109 ,文末自助获取源码 \color{red}{T109,文末自助获取源码} T109,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...
SUBSTRING_INDEX()在MySQL中的用法
语法: SUBSTRING_INDEX() 是 MySQL 中的一个字符串函数,它返回一个字符串,该字符串包含从字符串的开始或结束到指定的子字符串出现指定次数为止的部分。这个函数的语法如下: SUBSTRING_INDEX(string, delimiter, count)string&a…...
对45家“AI+安全”产品/方案的分析
一. 关键洞察 “AI+安全”创新非常活跃,一片百家争鸣之势,赛道选择上,以事件分诊Incident Triage、 安全辅助Security Copilots、自动化Automation三者为主为主,这充分反映了当前安全运营的主要需求,在产品理念选择上以 AI 和 自动化为主,这确实又切合上了在关键…...
Oracle Dataguard(主库为 Oracle 11g 单节点)配置详解(1):Oracle Dataguard 概述
Oracle Dataguard(主库为 Oracle 11g 单节点)配置详解(1):Oracle Dataguard 概述 目录 Oracle Dataguard(主库为 Oracle 11g 单节点)配置详解(1):Oracle Data…...
Pycharm 中 virtualenv、pipenv、conda 虚拟环境的用法
文章目录 前言虚拟环境的通俗介绍虚拟环境和非虚拟环境该怎么选?通过 Virtualenv 方式创建虚拟环境通过 Pipenv 方式创建虚拟环境通过 Conda 方式创建虚拟环境前言 在网上找了好一些资料,发现介绍 Pycharm 虚拟环境的不多,查了一些资料,并做个总结。 本文主要是介绍 Pycha…...
UNI-APP弹窗
组件代码 <template><view><!-- 蒙版 --><view class"mask" click"close()" v-show"tanchuang"></view><!-- 弹窗 --><view class"pop" :style"{height:height*0.8 px,top:tanchuang?…...
【大模型实战篇】LLaMA Factory微调ChatGLM-4-9B模型
1. 背景介绍 虽然现在大模型微调的文章很多,但纸上得来终觉浅,大模型微调的体感还是需要自己亲自上手实操过,才能有一些自己的感悟和直觉。这次我们选择使用llama_factory来微调chatglm-4-9B大模型。 之前微调我们是用两块3090GPU显卡&…...
【Cesium】三、实现开场动画效果
文章目录 实现效果实现方法实现代码组件化 实现效果 实现方法 Cesium官方提供了Camera的flyTo方法实现了飞向目的地的动画效果。 官方API:传送门 这里只需要用到目的地(destination)和持续时间(duration)这两个参数…...
#渗透测试#红蓝攻防#红队打点web服务突破口总结01
免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停…...
适用于项目经理的跨团队协作实践:Atlassian Jira与Confluence集成
适用于项目经理的跨团队协作实践:Atlassian Jira与Confluence集成 现代项目经理的核心职责是提供可视性、保持团队一致,并确保团队拥有交付出色工作所需的资源。在过去几年中,由于分布式团队的需求不断增加,项目经理这一角色已迅速…...
智能家居体验大变革 博联 AI 方案让智能不再繁琐
1. 全球AI技术发展背景及智能家居市场趋势 人工智能(AI)技术的飞速发展正在推动全球各行业的数字化转型。国际电信联盟与德勤联合发布《人工智能向善影响》报告指出,全球94%的商界领袖认为,人工智能技术对于其企业在未来5年内的发…...
云计算与服务是什么
云计算与服务是一个广泛而深入的话题,涵盖了云计算的基本概念、特点、服务类型以及应用场景等多个方面。以下是对云计算与服务的详细解析: ### 一、云计算的基本概念 云计算是一种基于互联网的计算方式,它通过动态易扩展且虚拟化的资源&…...
接口测试面试题
接口测试在软件测试中占据重要位置,无论是功能测试还是性能测试,接口的稳定性至关重要。以下总结了一些常见的接口测试面试题,帮助你从容应对面试挑战! 面试官常说:“接口测试是测试的重头戏,了解接口的设计…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX(不访问内存)XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
MinIO Docker 部署:仅开放一个端口
MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...
论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving
地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
软件工程 期末复习
瀑布模型:计划 螺旋模型:风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合:模块内部功能紧密 模块之间依赖程度小 高内聚:指的是一个模块内部的功能应该紧密相关。换句话说,一个模块应当只实现单一的功能…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现指南针功能
指南针功能是许多位置服务应用的基础功能之一。下面我将详细介绍如何在HarmonyOS 5中使用DevEco Studio实现指南针功能。 1. 开发环境准备 确保已安装DevEco Studio 3.1或更高版本确保项目使用的是HarmonyOS 5.0 SDK在项目的module.json5中配置必要的权限 2. 权限配置 在mo…...
