日期时间选择(设置禁用状态)
目录
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年内的发…...
云计算与服务是什么
云计算与服务是一个广泛而深入的话题,涵盖了云计算的基本概念、特点、服务类型以及应用场景等多个方面。以下是对云计算与服务的详细解析: ### 一、云计算的基本概念 云计算是一种基于互联网的计算方式,它通过动态易扩展且虚拟化的资源&…...
接口测试面试题
接口测试在软件测试中占据重要位置,无论是功能测试还是性能测试,接口的稳定性至关重要。以下总结了一些常见的接口测试面试题,帮助你从容应对面试挑战! 面试官常说:“接口测试是测试的重头戏,了解接口的设计…...
2026好用的企业内网通讯软件:哪家更适合你?
2026年,企业数字化办公的浪潮已进入深水区。随着《数据安全法》等法规的深度落地,以及企业对核心数字资产掌控权的重视,一个显著的趋势正在发生:企业通讯市场正在经历一场深刻的“向内回归”——私有化部署正从传统行业的无奈之选…...
肿瘤免疫微环境解析:8大免疫浸润工具实战指南
1. 肿瘤免疫微环境分析的核心价值 当你拿到一份肿瘤样本的转录组数据时,最令人兴奋的莫过于揭开它的免疫面纱——那些隐藏在肿瘤组织中的免疫细胞究竟在做什么?这就是免疫浸润分析的价值所在。想象一下,肿瘤组织就像一座复杂的城市࿰…...
如何永久备份微信聊天记录?WeChatMsg完整解决方案指南
如何永久备份微信聊天记录?WeChatMsg完整解决方案指南 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeCha…...
电子设计竞赛必备:RC、运放、TTL信号处理电路实战指南(附避坑技巧)
电子设计竞赛信号处理电路实战:从RC滤波到TTL脉冲的进阶技巧 第一次参加电子设计竞赛时,我在信号处理环节浪费了整整两天时间——原本清晰的方波经过电路后变得面目全非,放大后的信号带着令人头疼的振荡,而评委要求的脉冲宽度总是…...
H5扫码功能选型实战:微信JS-SDK vs 纯前端库,从公众号配置到代码封装的完整流程
H5扫码功能选型实战:微信JS-SDK vs 纯前端库的技术决策指南 当营销活动页需要实现"扫码领优惠券"功能时,技术团队突然陷入争论:是直接调用微信JS-SDK,还是采用纯前端扫码库?这个看似简单的技术决策ÿ…...
千问3.5-2B在物流场景:运单图片自动识别+收发件信息结构化
千问3.5-2B在物流场景:运单图片自动识别收发件信息结构化 1. 物流行业的痛点与机遇 每天,物流企业需要处理数以百万计的运单信息录入工作。传统的人工录入方式存在三个明显问题: 效率低下:一个熟练的录入员每小时最多处理50-80…...
墨语灵犀对比传统方法:自动化作业批改效果实测
墨语灵犀对比传统方法:自动化作业批改效果实测 作为一名在教育技术领域摸爬滚打了多年的从业者,我见过太多关于“AI批改作业”的讨论。从最初的简单关键词匹配,到后来的规则引擎,每次技术迭代都让人充满期待,但实际落…...
千问3.5-9B视觉模型快速部署指南:单卡RTX 4090D实测可用
千问3.5-9B视觉模型快速部署指南:单卡RTX 4090D实测可用 1. 开篇:为什么选择千问3.5-9B视觉模型? 如果你正在寻找一个能够理解图片内容的中文多模态模型,千问3.5-9B视觉版(Qwen3.5-9B-VL)值得你关注。这个…...
飞书机器人告警配置避坑指南:夜莺监控常见报错解决方案
飞书机器人告警配置避坑指南:夜莺监控常见报错解决方案 深夜的告警风暴里,飞书机器人突然罢工是什么体验?上周三凌晨2点,当我面对满屏的Key Words Not Found和sign match fail报错时,终于理解了为什么运维工程师的咖啡…...
解锁知识:9种突破信息壁垒的创新方案
解锁知识:9种突破信息壁垒的创新方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代,高效的"信息获取"与"资源解锁"…...
