Element UI DatePicker选择日期范围区间默认显示前一个月和本月

要求:点击el-date-picker选择时间范围时,默认展开当月和上个月。

但是Element UI的组件默认展开的是本月和下一个月,如下图所示:

改为

<span @click="changeInitCalendarRange"><el-date-picker v-model="ruleForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="onsetmonitor" @blur="blur"class="form-width"></el-date-picker>
</span>
<script>
export default {data() {return {pickerOptions: {disabledDate(time) {return time.getTime() > Date.now() - 8.64e7 || time.getTime() < Date.now() - 8.64e7 * 90;},shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);},},{text: '最近一个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);},},{text: '最近三个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);},},],},};},methods: {/**时间范围选择器,组件默认展示上月和本月  点击判断**/changeInitCalendarRange() {if(this.countss > 0){return}else{this.countss++let element = document.querySelector("button.el-picker-panel__icon-btn.el-icon-arrow-left");if (element){element.click()};};},//多次点击清空按钮blur(){if(this.ruleForm.time == null){this.countss = 0;}},//如果选定值,重置countssonsetmonitor(){if(this.ruleForm.time){return};this.countss = 0},}
}

 

 

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

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

相关文章

8月长沙学术会议:经济金融发展国际会议(ICEFD 2024)

经济金融发展国际会议&#xff08;ICEFD 2024&#xff09;将于2024年8月20-22日在长沙盛大举行。本次会议汇聚了国内外众多高校、科研机构、企业界及其他相关领域的专家学者&#xff0c;共同探讨经济金融发展的新趋势、新挑战和新机遇。 长沙&#xff0c;这座历史悠久的文化名…

Android车载MCU控制音量和ARM控制音量的区别和优缺点—TEF6686 FM/AM芯片

不要嫌前进的慢&#xff0c;只要一直在前进就好 文章目录 前言一、系统架构图1.MCU控制音量的架构图&#xff08;老方法&#xff09;2.ARM控制音量的架构图&#xff08;新方法&#xff09; 二、为啥控制音量不是用AudioManager而是执着去直接控制TDA7729&#xff1f;三、MCU控制…

wls2下的centos使用桥接模式连接宿主机网络独立静态ip

前提&#xff1a;wsl2已安装&#xff0c;可正常更新 1.在控制面板中&#xff0c;打开开启或关闭windows功能&#xff0c;将里面的 Hyper-V功能打开&#xff0c;此处涉及重启 2. 按一下win键&#xff0c;输入hy&#xff0c;上面可以看到Hyper-V Manager,点进去 3.选择右边的 Vi…

【C语言初阶】C语言数组基础:从定义到遍历的全面指南

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C语言 “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C语言函数 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀数组 &#x1f4d2;1. 什么是数组…

npm install报错:npm error ERESOLVE could not resolve

从git上拉取一个新vue项目下来&#xff0c;在npm install时报错&#xff1a;npm error ERESOLVE could not resolve 有网友分析原因是因为依赖冲突导致报错&#xff0c;解决方法如下&#xff1a; # --legacy-peer-deps&#xff1a;安装时忽略所有peerDependencies&#xff0c…

大鲸鱼docker-compose单机容器集群编排工具

目录 一、Docker-compose 概述 二、Docker-compose简介 三、YML文件格式及编写注意事项 1.yml文件是什么 2.yml问价使用注意事项 3.yml文件的基本数据结构 四、Docker-compose 配置 1.Docker-Compose 配置常用字段 2.Docker Compose常用命令 3.使用Docker-compose创建…

win10删除鼠标右键选项

鼠标右键菜单时&#xff0c;发现里面的选项特别多&#xff0c;找一下属性&#xff0c;半天找不到。删除一些不常用的选项&#xff0c;让右键菜单变得干净整洁。 1、按下键盘上的“winR”组合按键&#xff0c;调出“运行”对话框&#xff0c;输入“regedit”命令&#xff0c;点击…

创建鸿蒙手机模拟器(HarmonyOS Emulator)

文 | Promise Sun 一.前提条件&#xff1a; 鸿蒙项目开发需要使用模拟器进行开发测试&#xff0c;但目前想在DevEco Studio开发工具中使用模拟器就必须到华为官网进行报名申请&#xff0c;参加“鸿蒙模拟器&#xff08;HarmonyOS Emulator&#xff09;Beta活动申请”。 申请审…

gitlab新建仓库

总贴 每个git网站都有不同的创建项目的方式&#xff0c;现在举例gitlab&#xff0c;其他例如gitee&#xff0c;gitcode&#xff0c;都是差不多的&#xff0c;自行百度 1![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/dae875d9048940c0aeb292c07d6a4a62.png)1和2是项…

C# 之工控机数据类型 高低位(大小端)、BitConverter、IsLittleEndian、字节数组转换(高低位)

八种基本数据类型&#xff1a;byte、short、int、long、float、double、boolean、char byte 8位、有符号的以二进制补码表示的整数 min : -128&#xff08;-2^7&#xff09; max: 127(2^7-1) default: 0 对应包装类&#xff1a;Byte short 16位、有符号的以二进制补码表示…

spark shell

1.进行shell命令行 spark-shell 2.创建RDD 2.1 读取文件创建RDD 2.1.1读取linux文件系统的文件创建RDD --需要保证每一个worker中都有该文件 val data1 sc.textFile("file:/opt/file/word.txt") 2.1.2读取hdfs文件系统上的文件创建RDD val data2sc.textFile("…

正点原子STM32(基于HAL库)6

目录 TFTLCD&#xff08;MCU 屏&#xff09;实验TFTLCD 简介TFTLCD 简介液晶显示控制器FSMC 简介FSMC 关联寄存器简介 硬件设计程序设计FSMC 和SRAM 的HAL 库驱动程序流程图程序解析 下载验证 LTDC LCD&#xff08;RGB 屏&#xff09;实验RGBLCD<DC 简介RGBLCD 简介LTDC 简介…

Proxyman for Mac v5.6.1 抓包调试工具

Mac分享吧 文章目录 效果一、下载软件二、功能三、开始安装1、双击运行软件&#xff0c;将其从左侧拖入右侧文件夹中&#xff0c;等待安装完毕2、应用程序显示软件图标&#xff0c;表示安装成功 四、运行测试1、打开软件 安装完成&#xff01;&#xff01;&#xff01; 效果 一…

虚拟机及其Debian(kali)安装

本机电脑为Windows10系统专业版&#xff0c;在此基础上安装VMware和系统&#xff08;Kali&#xff09; 步骤如下 一、安装 VMware Workstation Pro v16.2.4 安装步骤可参照网上博客&#xff0c;该步骤较简单&#xff0c;此处不做讲解。文件中共计两个&#xff0c;其中一个是激活…

.NET C# 配置 Options

.NET C# 配置 Options 使用 options 模式可以带来许多好处&#xff0c;包括清晰的配置管理、类型安全、易于测试和灵活性。但在使用过程中&#xff0c;也需要注意配置复杂性、性能开销和依赖框架等问题。通过合理设计和使用&#xff0c;可以充分发挥 options 模式的优势&#…

【.NET全栈】ASP.NET开发Web应用——计算器

文章目录 一、简单计算器二、复杂计算器 一、简单计算器 新建Web应用项目&#xff0c;窗体页面 窗体设计代码&#xff1a; <% Page Language"C#" AutoEventWireup"true" CodeBehind"Default.aspx.cs" Inherits"AdoDemo.Default"…

JVM:常用工具总结

文章目录 一、jstat工具 一、jstat工具 Jstat工具是JDK自带的一款监控工具&#xff0c;可以提供各种垃圾回收、类加载、编译信息等不同的数据。使用方法为&#xff1a;jstat -gc进程ID每次统计的时间间隔&#xff08;毫秒&#xff09;统计次数。 C代表Capacity容量&#xff0c…

数据库系统概论:事务与并发一致性问题

随着网络应用的普及&#xff0c;数据库并发问题变得越来越重要。数据库并发指的是多个用户或进程同时访问和操作数据库的能力。它是数据库系统性能优化的重要方面&#xff0c;旨在提高系统的吞吐量和响应时间&#xff0c;以满足多用户同时访问数据库的需求。然而&#xff0c;这…

使用viso画流程图做PPT

参考链接&#xff1a;Visio如何快速制作流程图_哔哩哔哩_bilibili 调出框图&#xff1a; 将需要的图形拖过来 小四的话&#xff0c;是12pt 连接框图 改变线的连接类型 添加箭头 选中所有需要添加箭头的图片&#xff0c;然后选择不同样式的箭头&#xff0c;查看号他们的朝向…

测试用例的设计方法

等价类 等价类概念&#xff1a;在所有测试的数据中&#xff0c;具有某种共同特征的数据子集 边界值 边界值分析是对程序输入或输出的边界值进行测试的一种黑盒测试方法 边界值是作为等价类的补充&#xff0c;其主要区别是&#xff1a; 边界值测试设计不是从某一个等价类中…