当前位置: 首页 > news >正文

element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

<el-date-picker v-model="timeRange" type="datetimerange" align="right" :default-time='defaultTime'value-format="yyyy-MM-dd HH:mm:dd" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期" :picker-options="pickerOptions" @change="handleChangeTime":clearable="false"></el-date-picker>

设置:picker-options="pickerOptions"

然后在data里面设置

pickerOptions: {onPick: ({maxDate,minDate}) => {this.selectDate = minDate.getTime()if (maxDate) {this.selectDate = ''}},disabledDate: (time) => {if (this.selectDate !== '') {const one = (15 * 24 * 3600 - 1) * 1000 // 00:00:00 到23:59:59const minTime = this.selectDate - oneconst maxTime = this.selectDate + onereturn time.getTime() < minTime || time.getTime() > maxTime}}}

源代码

<template><div class="promotion-page"><div class="promotion-box"><div class="title">通证估值</div><div class="time-box type-box"><span class="time-span">时间</span><el-date-picker v-model="time" type="datetimerange" range-separator="-" start-placeholder="选择开始时间"end-placeholder="选择结束日期" class="date" @change="getTableData" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker><!-- <el-date-picker v-model="time" type="datetimerange"  align="right" :default-time='defaultTime'value-format="yyyy-MM-dd HH:mm:dd" range-separator="至" start-placeholder="开始日期"end-placeholder="结束日期" :picker-options="pickerOptions" @change="getTableData":clearable="false"></el-date-picker> --></div><div class="echarts_piece"><div class="echarts_piece_t"><span>8.55</span><span>昨日估值</span></div><div class="echarts_piece_t"><span>0.56%</span><span>涨幅</span></div></div><div ref="chart" style="width: 1126.11px; height: 491.66px;"></div></div></div>
</template><script>import * as echarts from 'echarts';export default {name: 'EChartsComponent',data() {return {chart: null,// 时间筛选time: [],selectDate: '',defaultTime: ['00:00:00', '23:59:59'],timeRange: [],pickerOptions: {onPick: ({maxDate,minDate}) => {this.selectDate = minDate.getTime()if (maxDate) {this.selectDate = ''}},disabledDate: (time) => {if (this.selectDate !== '') {const one = (15 * 24 * 3600 - 1) * 1000 // 00:00:00 到23:59:59const minTime = this.selectDate - oneconst maxTime = this.selectDate + onereturn time.getTime() < minTime || time.getTime() > maxTime}}}};},mounted() {this.chart = echarts.init(this.$refs.chart);this.drawChart();},methods: {// 获取数据async getTableData() {let params = {startTime: this.time?.[0],endTime: this.time?.[1],}console.log('请求参数@@@@', params);// let {// 	code,// 	total,// 	rows// } = await integralUserVOList(params)// if (code == 200) {// 	this.table_data = rows// 	this.total = total// 	console.log('当前的数据', this.table_data);// }},drawChart() {const option = {title: {text: ''},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#fff'}}},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['10/11', '10/12', '10/13', '10/13', '10/14', '10/16', '17']}],yAxis: [{show: false,type: 'value'}],series: [{name: '',type: 'line',stack: 'Total',color: '#F35555',areaStyle: {opacity: 0.8,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#F35555'},{offset: 1,color: '#FFFFFF'}])},emphasis: {focus: 'series'},data: [0.000026, 0.000056, 0.000076, 0.000086, 0.000096, 0.000097, 0.000099]}]};this.chart.setOption(option);},},};
</script>
<style scoped lang="scss">.promotion-page {padding: 16px;.promotion-box {padding: 16px;min-width: 1280px;width: 100%;background: #FFFFFF;box-shadow: 0px 1px 4px 1px #E5E9F2;border-radius: 5px 5px 5px 5px;}}// 盒子的标题.title {margin-bottom: 0;text-align: left;font-size: 24px;font-weight: 500;color: #31394d;font-weight: bold;}::v-deep {.el-range-editor--medium .el-range__icon,.el-range-editor--medium .el-range__close-icon {line-height: 20px !important;}}// 时间筛选.time-box {display: flex;align-items: center;margin-top: 30px;padding-left: 56px;.time-span {padding-right: 10px;}// 深度选择.date {height: 28px;width: 380px;.el-input__icon {font-size: 12px;height: 24px;line-height: 24px;}.el-range-separator {font-size: 12px;height: 24px;line-height: 24px;}}}.echarts_piece {margin-left: 56px;margin-top: 32px;display: flex;width: 300px;justify-content: space-between;// border: 1px solid red ;.echarts_piece_t span {display: block;}.echarts_piece_t span:nth-child(1) {font-size: 36px;font-weight: bold;}.echarts_piece_t span:nth-child(2) {color: #999999;font-size: 14px;}}
</style>

相关文章:

element UI DatePicker 日期选择器 点击时间点可选限制范围前后十五天

<el-date-picker v-model"timeRange" type"datetimerange" align"right" :default-timedefaultTimevalue-format"yyyy-MM-dd HH:mm:dd" range-separator"至" start-placeholder"开始日期"end-placeholder"…...

【自用】vmware workstation建立主机window与虚拟机ubuntu之间的共享文件夹

1.在windows中建立1个文件夹 在vmware中设置为共享文件夹 参考博文&#xff1a; https://zhuanlan.zhihu.com/p/650638983 2.解决&#xff1a; &#xff08;1&#xff09;fuse: mountpoint is not empty &#xff08;2&#xff09;普通用户也能使用共享目录 参考博文&#x…...

【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A:基于计算机视觉的坑洼道路检测和识别 python 代码解析

【2023年MathorCup高校数学建模挑战赛-大数据竞赛】赛道A&#xff1a;基于计算机视觉的坑洼道路检测和识别 python 代码解析 1 题目 坑洼道路检测和识别是一种计算机视觉任务&#xff0c;旨在通过数字图像&#xff08;通常是地表坑洼图像&#xff09;识别出存在坑洼的道路。这…...

Mozilla Firefox 119 现已可供下载

Mozilla Firefox 119 开源网络浏览器现在可以下载了&#xff0c;是时候先看看它的新功能和改进了。 Firefox 119 改进了 Firefox View 功能&#xff0c;现在可以提供更多内容&#xff0c;如最近关闭的标签页和浏览历史&#xff0c;你可以按日期或网站排序&#xff0c;还支持查…...

What is 哈希?

哈希 ​ 前言&#xff1a;大一大二就一直听说哈希哈希&#xff0c;但一直都没有真正的概念&#xff1a;What is 哈希&#xff1f;这篇博客就浅浅聊一下作者认知中的哈希。 理解哈希 ​ 哈希&#xff08;Hash&#xff09;也可以称作散列&#xff0c;实质就是一种映射&#xf…...

在Photoshop中如何校正倾斜的图片

在Photoshop中如何校正倾斜的图片呢&#xff1f;今天就教大家如何操作。 将需要操作的图片拉到PS软件中&#xff0c;自动形成项目。 点击上方“滤镜”中的“镜头校正”。 进入“镜头校正”窗口&#xff0c;点击左侧的“拉直工具”。文章源自设计学徒自学网-http://www.sx1c.co…...

Maven第六章:Maven的自定义插件开发

Maven第六章:Maven的自定义插件开发 前言 maven不仅仅只是项目的依赖管理工具,其强大的核心来源自丰富的插件,可以说插件才是maven工具的灵魂。本篇文章将对如何自定义maven插件进行讲解,希望对各位读者有所帮助。 Maven插件开发的基本概念 Maven插件是由Maven构建工具本身…...

springboot 注入配置文件中的集合 List

在使用 springboot 开发时&#xff0c;例如你需要注入一个 url 白名单列表&#xff0c;你可能第一想到的写法是下面这样的&#xff1a; application.yml white.url-list:- /test/show1- /test/show2- /test/show3Slf4j RestController RequestMapping("/test") pub…...

springboot整合redis+lua实现getdel操作保证原子性

原始代码 脚本逻辑先获取redis的值&#xff0c;判断是否等于期望值。 条件成立则删除&#xff0c;不成立则返回0 if redis.call(get, KEYS[1]) ARGV[1] thenreturn redis.call(del, KEYS[1]) end return 0 测试代码 根据上面的逻辑加了测试&#xff0c; 在判断成功后等待5…...

win10系统nodejs的安装npm教程

1.在官网下载nodejs&#xff0c;https://nodejs.org/en 2&#xff0c;双击nodejs的安装包 3&#xff0c;点击 next 4&#xff0c;勾选I accpet the terms in…… 5&#xff0c;第4步点击next进入配置安装路径界面 6,点击next&#xff0c;选中Add to PATH &#xff0c;旁边…...

C语言assert函数:什么是“assert”函数

我一直在学习 OpenCV 教程&#xff0c;遇到了assert函数;它做什么&#xff1f; assert将终止程序&#xff08;通常带有引用 assert 语句的消息&#xff09;&#xff0c;如果其参数为 false。它通常在调试过程中使用&#xff0c;以使程序在发生意外情况时更明显地失败。 例如&…...

R语言绘图-5-条形图(修改坐标轴以及图例等)

0. 说明&#xff1a; 1. 绘制条形图&#xff1b; 2. 添加文本并调整位置&#xff1b; 3. 调整x轴刻度的字体、角度及颜色&#xff1b; 4. 在导出pdf时&#xff0c;如果没有字体&#xff0c;该怎么解决问题&#xff1b; 1. 结果&#xff1a; 2. 代码&#xff1a; library(ggp…...

uniapp自定义权限菜单,动态tabbar

已封装为组件&#xff0c;亲测4个菜单项目可以切换&#xff0c; 以下为示例&#xff0c;根据Storage 中 userType 的 值&#xff0c;判断权限菜单 <template><view class"tab-bar pb10"><view class"tabli" v-for"(tab, index) in ta…...

ubuntu20.04配置解压版mysql5.7

目录 1.创建mysql 用户组和用户2.下载 MySQL 5.7 解压版3.解压 MySQL 文件4.将 MySQL 移动到适当的目录5.更改mysql目录所属的用户组和用户&#xff0c;以及权限6.进入mysql/bin/目录&#xff0c;安装初始化7.编辑/etc/mysql/my.cnf配置文件8.启动 MySQL 服务&#xff1a;9.建立…...

【js】vue获取document.getElementById(a)为null

需求 在菜单A页面点击某个元素携带id跳转到B详情页面&#xff0c;B页面获取该id元素的offsetTop, 并自动滚动到该元素处 问题 跳转到B详情页面, 在mounted获取到document.getElementById(a)为null, 因为整个详情页面是从后端获取来渲染的数据, 因此此时dom元素还未渲染出来,…...

系列六、Mybatis的一级缓存

一、概述 Mybatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xff09;&#xff0c; 第二次执行相同的查询时&#xff0c;会…...

用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例

用中文编程工具给澳大利亚客户定制开发的英文版服装进销存软件应用实例 软件从2016年一直用到现在&#xff0c;而且开的分店也是安装的这个软件&#xff0c;上图是定制打印的格式。 该编程工具不但可以连接硬件&#xff0c;而且可以开发大型的软件。 编程系统化课程总目录及明…...

geoserver 的跨域问题怎么解决

文章目录 问题分析问题 geoserver 发生跨域问题报错 分析 要解决 GeoServer 的跨域问题,可以通过配置 GeoServer 的 web.xml 文件来启用跨域资源共享(CORS)。以下是一些简单的步骤来实现这一点: 找到 GeoServer 的安装目录下的 webapps/geoserver/WEB-INF 文件夹。在该文…...

SQL语法实践(一)

文章 原文链接 实践 CREATE TABLE friend(fid INT NOT NULL,NAME VARCHAR(10) NOT NULL,age INT NOT NULL,adress VARCHAR(10) )SHOW TABLES; SELECT * FROM friend; SELECT fid,NAME FROM friend;INSERT INTO friend VALUES(1,Jack,18,Tianjing); INSERT INTO friend VALUE…...

路由器如何设置IP地址

IP地址是计算机网络中的关键元素&#xff0c;用于标识和定位设备和主机。在家庭或办公室网络中&#xff0c;路由器起到了连接内部设备和外部互联网的关键作用。为了使网络正常运行&#xff0c;需要正确设置路由器的IP地址。本文将介绍如何设置路由器的IP地址&#xff0c;以确保…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...