封装 element el-date-picker时间选择区间

基于el-date-picker 处理满足项目需求。(:最多选择7天)
效果: 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 (最多可查询7天数据)3
在这里插入图片描述
在这里插入图片描述

<template><section class="warning-container"><header class="query-head"><el-form :inline="true" class="query-form"><div><el-form-item label="日期选择" label-width="120px"><el-date-pickerv-model="daterangeBizOccurDate"type="daterange":clearable="true"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"value-format="yyyy-MM-dd"@change="onLoad"></el-date-picker></el-form-item><el-form-item label=" " label-width="30px"><span style="color: #aaa">提示:最多可查询7天数据</span></el-form-item></div></el-form></header></section>
</template><script>export default {props: {},data () {return {daterangeBizOccurDate: [],maxDate: new Date(),selectData: '',pickerOptions: {disabledDate: (time) => {if (this.selectData) {const maxDurationTem = 6 * 24 * 3600 * 1000return time.getTime() > this.maxDate|| time.getTime() > this.selectData + maxDurationTem|| time.getTime() < this.selectData - maxDurationTem} else {return time.getTime() > this.maxDate}},onPick: ({ maxDate, minDate }) => {this.selectData = minDate.getTime()if (maxDate) {// 第二次点击日期选择器,选好初始时间和结束时间后,解除禁用限制this.selectData = ''}}}}},watch: {},mounted () {this.defaultDate()},methods: {defaultDate (){// 初始化时默认当前时间let sTime = window.$dayjs(new Date()).format('YYYY-MM-DD')let eTime = window.$dayjs(new Date()).format('YYYY-MM-DD')// startTime: window.$dayjs().format('YYYY-MM-DD 00:00:00'),// endTime: window.$dayjs().add(1, 'day').format('YYYY-MM-DD 00:00:00')this.daterangeBizOccurDate = [new Date(sTime), new Date(eTime)] // 显示的默认时间},onLoad (val) {// 时间改变时推送事件给父组件进行调用处理this.$emit('selectDay7', val)}}
}
</script><style lang="scss" scoped>
::v-deep {.el-date-editor .el-range-separator {width: 8%;}.el-table {min-height: 200px;.el-table__cell {padding: 0;height: 48px;.cell {line-height: 26px;}}&.zmj-el-table::before {height: 1px;}}.el-form-item__label {color: #fff;}.el-pagination {display: flex;align-items: center;justify-content: flex-end;padding: 30px 0;.el-pagination__total,.el-pagination__jump {color: #fff;}button, .el-pager li {background: #031e3c;color: #fff;&.active {background: #1e4966;}}button:disabled {color: #999;}.el-input .el-input__inner {height: 28px;}}.el-select.query-select {width: 345px;}.el-tag.el-tag--info {background-color: #1A293A;border-color: #43576F;color: #fff;& > .el-tag__close {color: #8B929B;background-color: #1A293A;}}
}.warning-container {// width: 83vw;margin-top:-35px;// margin-left: 200px;// padding-top: 36px;.warning-table-wrap {width: 100%;overflow: hidden;}.warning-type {padding: 2px 8px;border-radius: 3px;&.type1 {background: #39131D;border: 1px solid #FF757A;color: #FF757A;}&.type2 {background: #4B4510;border: 1px solid #FFE395;color: #FFE395;}&.type3 {background: #122E58;border: 1px solid #A2C7FF;color: #A2C7FF;}&.type4 {background: #125853;border: 1px solid #A2FFEC;color: #A2FFEC;}}
}.query-head {// margin-bottom: 14px;
}.query-form {display: flex;justify-content: space-between;::v-deep {.el-form-item:nth-of-type(1) {.el-select.query-select {width: 420px;}}}::v-deep{.el-input__inner .el-range-input{background-color: #061729;color: #FFFFFF;}}
}
</style>

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

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

相关文章

FPGA硬件架构——具体型号是xc7k325tffg676-2为例

1.共如下图14个时钟域&#xff0c;XmYn(按坐标理解) 2.IOB(IOB为可编程输入输出单元,当然在普通Bank上的IOB附近还有很多时钟资源&#xff0c;例如PLL&#xff0c;MMCM资源。), 2.1 FPGA的Bank分为HP Bank和HR Bank&#xff0c;二者对电压的要求范围不同&#xff0c;HR支持更大…

2023龙信杯wp

打了好像70多分&#xff0c;没拿奖&#xff0c;因为一些众所周知的原因&#xff0c;复盘间隔时间太长了没什么印象了已经 案情简介 2023年9月&#xff0c;某公安机关指挥中心接受害人报案:通过即时通讯工具添加认识一位叫“周微”的女人&#xff0c;两人谈论甚欢&#xff0c;确…

大语言模型推理提速:TensorRT-LLM 高性能推理实践

作者&#xff1a;顾静 TensorRT-LLM 如何提升 LLM 模型推理效率 大型语言模型&#xff08;Large language models,LLM&#xff09;是基于大量数据进行预训练的超大型深度学习模型。底层转换器是一组神经网络&#xff0c;这些神经网络由具有 self-attention 的编码器和解码器组…

HTTP动态代理的原理及其对网络性能的影响

HTTP动态代理是一种通过代理服务器来转发HTTP请求和响应数据的网络技术&#xff0c;它可以优化网络性能、提高网络安全性&#xff0c;并解决跨域请求的问题。本文将详细介绍HTTP动态代理的原理及其对网络性能的影响。 一、HTTP动态代理的原理 HTTP动态代理的基本原理是在客户…

【数据结构四】栈与Stack详解

目录 栈与Stack 1.实现一个自己的栈 2.Stack的基本使用 3.栈的一些oj题训练 4.栈&#xff0c;虚拟机栈&#xff0c;栈帧的区别 栈与Stack 栈 &#xff1a;一种特殊的线性表&#xff0c;其 只允许在固定的一端进行插入和删除元素操作 。进行数据插入和删除操作的一端称为栈顶…

opencv#34 边缘检测(二)

Laplacian(拉普拉斯)算子 前面介绍的Sobel算子和Scharr算子存在的问题: 1.要分别计算两个方向&#xff08;x,y)的边缘&#xff0c;之后将两方向的边缘进行叠加。 2.边缘与方向相关性较大。当我们通过Sobel算子提取x方向检测时&#xff0c;它所能够检测到的边缘都是一个沿着y…

差分进化算法求解基于移动边缘计算 (MEC) 的无线区块链网络的联合挖矿决策和资源分配(提供MATLAB代码)

一、优化模型介绍 在所研究的区块链网络中&#xff0c;优化的变量为&#xff1a;挖矿决策&#xff08;即 m&#xff09;和资源分配&#xff08;即 p 和 f&#xff09;&#xff0c;目标函数是使所有矿工的总利润最大化。问题可以表述为&#xff1a; max ⁡ m , p , f F miner …

gin中使用限流中间件

限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指限制到达系统的并发请求数&#xff0c;本文列举了常见的限流策略&#xff0c;并以gin框架为例演示了如何为项目添加限流组件。 限流 限流又称为流量控制&#xff08;流控&#xff09;&#xff0c;通常是指…

如何在美国硅谷高防服务器上运行自定义的脚本和应用程序

在美国硅谷高防服务器上运行自定义的脚本和应用程序需要一定的技术和知识。下面我们将介绍一些关键步骤&#xff0c;帮助您顺利地在这些服务器上运行自定义应用程序和脚本。 确保您有对服务器的访问权限&#xff0c;并且已经通过SSH等方式连接到服务器。接下来&#xff0c;您可…

不就业,纯兴趣,应该自学C#还是JAVA?

不就业&#xff0c;纯兴趣&#xff0c;应该自学C#还是JAVA? 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「JAVA的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff…

微信小程序(十四)分包和分包预加载

注释很详细&#xff0c;直接上代码 新增内容&#xff1a; 1.分包的配置 2.分包预加载的写法 先说说为什么需要分包&#xff1a; 小程序追求小而快&#xff0c;主包的大小控制是小程序上线的硬性要求&#xff0c;分包有利于小程序优化加载速度 分包的注意事项&#xff1a; 单个分…

网络原理-初识(1)

目录 网络发展史 独立模式 网络互连 局域网LAN 广域网WAN 网络通信基础 IP地址 概念 格式 端口 概念 格式 认识协议 概念 作用 五元组 网络发展史 独立模式 独立模式:计算机之间相互独立; 网络互连 随着时代的发展,越来越需要计算机之间相互通信,共享软件和数…

【AI的未来 - AI Agent系列】【MetaGPT】6. 用ActionNode重写技术文档助手

文章目录 0. 前置推荐阅读1. 重写WriteDirectory Action1.1 实现WriteDirectory的ActionNode&#xff1a;DIRECTORY_WRITE1.2 将 DIRECTORY_WRITE 包进 WriteDirectory中 2. 重写WriteContent Action2.1 思考重写方案2.2 实现WriteContent的ActionNode2.3 改写WriteContent Act…

UV紫外激光打标机的优缺点是什么

​ UV紫外激光打标机具有以下优点&#xff1a; 1. 精度高&#xff1a;紫外激光打标机的光束质量好&#xff0c;聚焦光斑小&#xff0c;可以实现在各种材料上进行超精细打标。 2. 速度快&#xff1a;由于紫外激光的独特特性&#xff0c;打标速度非常快&#xff0c;提高了生产效…

冷链温湿度监控解决方案,实时监测,助力运输安全

为了确保药品、生鲜等在冷链运输过程中的安全监管,需要对冷链、仓库等环节的温湿度信息进行实时自动检测和记录&#xff0c;有效防范储运过程中可能影响产品质量安全的各类风险&#xff0c;确保储存和运输过程的产品质量。 冷链温湿度监控系统解决方案&#xff0c;利用智能温湿…

【目标跟踪】多相机环视跟踪

文章目录 一、前言二、流程图三、实现原理3.1、初始化3.2、输入3.3、初始航迹3.4、航迹预测3.5、航迹匹配3.6、输出结果 四、c 代码五、总结 一、前言 多相机目标跟踪主要是为了实现 360 度跟踪。单相机检测存在左右后的盲区视野。在智能驾驶领域&#xff0c;要想靠相机实现无…

springboot120企业级工位管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的企业级工位管理系统 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 …

SpringMVC 注解配置SpringMVC

文章目录 1、创建初始化类&#xff0c;代替web.xml2、创建SpringConfig配置类&#xff0c;代替spring的配置文件3、创建WebConfig配置类&#xff0c;代替SpringMVC的配置文件4、测试功能 使用配置类和注解代替web.xml和SpringMVC配置文件的功能 1、创建初始化类&#xff0c;代替…

Vue3实战:显示后台获取的用户数据

文章目录 一、实战概述二、实战步骤&#xff08;一&#xff09;创建数据库与表&#xff08;二&#xff09;编写后端程序1、创建Spring Boot项目2、配置数据源3、创建用户实体类4、创建用户仓库接口5、创建用户服务类6、创建用户控制器7、启动应用&#xff0c;查看结果 &#xf…

蓝牙BLE基础知识

目录 一、初识蓝牙BLE 1.课程介绍 2.为什么需要蓝牙技术 3.蓝牙发展历史 4.蓝牙技术优势 5.蓝牙技术简介 6.学习补充 二、物理层&#xff08;Physical layer&#xff09; 1.模拟调制 2.数字调制 3.射频信道 4.学习补充 三、链路层&#xff08;link layer&#xff0…