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

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},}
}

 

 

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Java字符串中的第一个唯一字符
  • Python机器学习入门:从理论到实践
  • 信号【Linux】
  • SenseVoice 实测,阿里开源语音大模型,识别效果和效率优于 Whisper,居然还能检测掌声、笑声!5分钟带你部署体验
  • JMeter请求导出Excel
  • 排序二叉树(c++)
  • Go基础编程 - 12 -流程控制
  • DPKG(Debian / Ubuntu包管理工具)的深入探索与使用
  • 【人工智能】机器学习 -- 决策树(乳腺肿瘤数)
  • java面试题,有synchronized锁,threadlocal、数据可以设置默认值、把redis中的json转为对象
  • 使用内网穿透工具 frp 发布内网 web 站点
  • WebGoC题解(13) 狐猬编程:GoC L4 结业测试 第4题 找木柴
  • 自动驾驶---视觉Transformer的应用
  • 工具(linux)
  • 判断用户输入IP的合法性判断输入IP与本机IP是否在同一网段C++QT
  • 《Java编程思想》读书笔记-对象导论
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • Asm.js的简单介绍
  • Elasticsearch 参考指南(升级前重新索引)
  • ES6简单总结(搭配简单的讲解和小案例)
  • iOS | NSProxy
  • JavaWeb(学习笔记二)
  • Js基础——数据类型之Null和Undefined
  • leetcode388. Longest Absolute File Path
  • Median of Two Sorted Arrays
  • Mysql优化
  • Objective-C 中关联引用的概念
  • Python十分钟制作属于你自己的个性logo
  • Python实现BT种子转化为磁力链接【实战】
  • scrapy学习之路4(itemloder的使用)
  • 关于Flux,Vuex,Redux的思考
  • 记一次删除Git记录中的大文件的过程
  • 嵌入式文件系统
  • 使用common-codec进行md5加密
  • 使用docker-compose进行多节点部署
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • !!java web学习笔记(一到五)
  • #、%和$符号在OGNL表达式中经常出现
  • #70结构体案例1(导师,学生,成绩)
  • #C++ 智能指针 std::unique_ptr 、std::shared_ptr 和 std::weak_ptr
  • #stm32整理(一)flash读写
  • #ubuntu# #git# repository git config --global --add safe.directory
  • (k8s中)docker netty OOM问题记录
  • (过滤器)Filter和(监听器)listener
  • (七)Appdesigner-初步入门及常用组件的使用方法说明
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • . NET自动找可写目录
  • ... fatal error LINK1120:1个无法解析的外部命令 的解决办法
  • ./configure、make、make install 命令
  • .htaccess配置常用技巧
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .net快速开发框架源码分享
  • .NET连接数据库方式